Immagine link, CSS

[Nebula88]

Allora, avrei bisogno di un img che faccia da link e che al passagio del mouse cambi, per poi tornare come prima allo spostamento del cursore..

ecco il code CSS che ho utilizzato:

.cantieri {
width:140px;
height:28px;
background-image:images/pulsanti/cantieri.gif;
}
.cantieri:link {
width:140px;
height:28px;
background-image:images/pulsanti/cantieri.gif;
}
.cantieri:hover {
width:140px;
height:28px;
background-image:images/pulsanti/cantieri2.gif;
}

e poi l'html..

[img]#[/img]

Cosa sbaglio??

[Mich_]

Ti manca l'immagine.

Nel src devi linkare un'immagine che esiste. Nel tuo caso probabilmente devi solo metterci una gif trasparente di 1 px.

[pierofix]

O usi le immagini nel markup o usi gli sfondi. Io suggerisco la tecnica dell'image-replacement. Un esempio sbrigativo:

Blog

Mettiamo caso l'immagine che vuoi usare abbia larghezza e altezza pari a 200 px; nel CSS faremo:

a {
   display:block;
   text-indent:-1000em; /* Nasconde il testo */
   width:200px; height:200px;
   background:url(immagine_normale.png) no-repeat 50% 50%;
}
a:hover {
   background-image:url(immagine_stato-sopra.png);
}

[andrea.paiola]

Originariamente inviato da pierofix
Io suggerisco la tecnica dell'image-replacement.

io no

[Nebula88]

allora, ho messo nel CSS questo

.cantieri {
   display:block;
   text-indent:-1000em; /* Nasconde il testo */
   width:140px; height:28px;
   background-image:url(images/pulsanti/cantieri.gif) no-repeat 50% 50%;
}
.cantieri:hover {
   background-image:url(images\pulsanti/cantieri2.gif);
}

e nell'html questo:

Blog

ma niente..

[pierofix]

Gli id si puntano con "#", non con ".".

[awd]

Originariamente inviato da andrea.paiola
io no

suggerisco una lettura sull'argomento http://pro.html.it/articoli/id_421/idcat_8/pro.html

[Nebula88]

#cantieri {
display:block;
text-indent:-1000em; /* Nasconde il testo */
width:140px; height:28px;
background-image:url(images/pulsanti/cantieri.gif) no-repeat 50% 50%;
}
#cantieri:hover {
background-image:url(images\pulsanti/cantieri2.gif);
}


Adesso va, solo se ci passo sopra con il mouse.

[andrea.paiola]

Originariamente inviato da awd


suggerisco una lettura sull'argomento http://pro.html.it/articoli/id_421/idcat_8/pro.html

che c'è da ridere? se l'immagine è un collegamento sarà un contenuto quindi secondo me andrebbe nel markup

"Una tecnica di Image Replacement è un modo per sostituire mediante i fogli di stile un' informazione testuale con un' informazione visuale."

questo secondo me è concettualmente errato: perchè sostituire un testo con un'immagine e non inserire direttamente l'immagine correttamente marcata (alt ecc... )?

oppure lasciare il povero testo a fare il suo lavoro?

il fatto che si possa fare non implica che si debba fare... mmm questa me la segno

[awd]

oh signur adesso s'è fatto il nuovo motto!