ciao volevo sapere se qualcuno puo dirmi come si fa con un semplice .css un bordo attorno ad una foto ch ecambia colore quando uno ci passa sopra magari che passi dal giallo al rosso (la foto ha un link)
un po come su badoo sulle foto delle persone
ringrazio
L'effetto lo puoi ottenere sia con i csc che senza,
la cosa importante è dare tramite un javascript un comando che dici che qiando si va sopra alla foto quella valore del border color deve cambiare.
Quindi cerca qualcosa su come cambiare i valori nei css tramite javascript
Non serve nessun javascript...Originariamente inviato da neronemassimo
ciao volevo sapere se qualcuno puo dirmi come si fa con un semplice .css un bordo attorno ad una foto ch ecambia colore quando uno ci passa sopra magari che passi dal giallo al rosso (la foto ha un link)
un po come su badoo sulle foto delle persone
ringrazio
CSS
codice:a img {border:2px solid #FF0} a img:hover {border:2px solid red}
ho provato ma non mi va.
ho fatto cosi:
creato un css esterno con questo codice...
a.img {border:4px solid #FFFF00}
a.img:hover {border:4px solid #000066}
invece questo è il codice nella pagina:
[img]000000/02.jpg[/img]
dove sbaglio???
questo codice
è errato, nel senso che gli attributi width, height e border si danno tramite css e non inline, comunque, è ovvio che se tu assegni border="0" annulli il bordo che dai tramite css, quindi non lo vedrai mai.codice:[img]000000/02.jpg[/img]
Quindi al massimo, rimanendo nel tuo modo di scrivere codice, puoi fare così:
Se poi tutte le immagini con classe "img" (alla quale cambierei nome per non avere conflitti di sorta), sono uguali, puoi assegnare il tuo width e height direttamente nella classe.codice:[img]000000/02.jpg[/img]
spiegazione suprema...
da vero maestro...
ringrazio
purtroppo pero' non mi va lo stesso
sembra quasi non legga il css è possibile?
ecco il codice pagina
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
[img]000000/02.jpg[/img]
[img]000000/02.jpg[/img]
</body>
</html>
ed il css che si chiama css.css
body { FONT-SIZE: 8pt; COLOR: #000066; FONT-FAMILY: Verdana; background-color: #FFFFFF;margin : 0;
p { font-family:Verdana; font-size:8pt; color:#000066;}
H1 { font-family:Verdana; font-size:10pt; color:#FF0000; ;font-weight: bold}
H2 { font-family:Tahoma, Verdana; font-size:18px; color:#FF0000; ;font-weight: bold}
H3 { font-family:Tahaoma; font-size:16px; color:#000066; }
H4 { font-family:Verdana; font-size:10px; color:#000066; }
A:link, A:visited { text-decoration: underline; color:#000066}
A:hover{ text-decoration: none; color: red; background: none}
A.img {border:4px solid #FFFF00}
A.img:hover {border:4px solid #000066}
dove sbaglio?
Pensavo che copiare e incollare non fosse difficile...Originariamente inviato da neronemassimo
A.img {border:4px solid #FFFF00}
A.img:hover {border:4px solid #000066}
La classe "img" dov'è finita ? O comunque dov'è il suo sostituto ?
Chi ha mai scritto la "a" maiuscola ?
Chi ha mai messo punti dopo di essa ?
codice:a img {border:2px solid #FF0} a img:hover {border:2px solid red}
HTML
CSScodice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test border</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link media="all" href="css.css" rel="stylesheet" type="text/css"> </head> <body> [img]000000/02.jpg[/img] [img]000000/02.jpg[/img] </body> </html>
Scrivi in minuscolo...adesso copia e incolla tutto quello che c'è qui, il codice HTML nella tua pagina html e il codice CSS in css.css, così com'è!codice:body {font-size:8pt;color:#000066;font-family:Verdana;background-color:#fff;margin:0} p {font-family:Verdana;font-size:8pt;color:#000066} h1 {font-family:Verdana;font-size:10pt;color:#FF0000;font-weight:700} h2 {font-family:Tahoma, Verdana;font-size:18px;color:#FF0000;font-weight:700} h3 {font-family:Tahaoma;font-size:16px;color:#000066} h4 {font-family:Verdana;font-size:10px;color:#000066} a:link, a:visited {text-decoration:underline;color:#000066} a:hover{text-decoration:none;color:red;background:none} a img {border:4px solid #FFFF00} a img:hover {border:4px solid #000066}
mi scuso davvero per l incomprensione.
avevo gia provato come dicevi tu senza . e con a minuscola
e non andava
ora ho copiato e incollato ma non va ancora
www.desktop-gratis.com/test.htm
non va ne con avantbrowser ne explorer
non so dove sbaglio!
A me pare funzioni benissimo :master:
Io uso Mozilla Firefox
ti confermo che il codice testato su FF funziona.Originariamente inviato da neronemassimo
mi scuso davvero per l incomprensione.
avevo gia provato come dicevi tu senza . e con a minuscola
e non andava
ora ho copiato e incollato ma non va ancora
www.desktop-gratis.com/test.htm
non va ne con avantbrowser ne explorer
non so dove sbaglio!
Tieni presente una cosa: explorer vede gli hover solo sul tag a. Quindi, se tu associ l'hover a un'immagine, IE6 non lo vede.
Permessi di invio
Rispondi quotando