immagini che cambiano con a:hover

[devil89]

Non riesco proprio a fare in modo che al passaggio del mouse un'immagine cambi e al suo posto ne venga caricata un'altra.

Mi potete aiutare?

In pratica io ho due bottoni (immagini gif). Uno di colore chiaro e uno scuro.
Vorrei che il bottone chiaro fosse quello caricato con il tag a, con a:hover fosse messo quello scuro.

Grazie

[fcaldera]

Qualcosa abbastanza pulito e leggibile dai motori di ricerca e che funziona a css disabilitati:

CSS

a {
   width: /* larghezza immagine chiara */ ;
   height: /* larghezza immagine chiara */ ;
   display: block;
   text-indent: -999em;
   background: url(path/to/immaginechiara.gif) top left no-repeat;
}

a:hover {
   background: url(path/to/immaginescura.gif) top left no-repeat;   
}

XHTML

Testo linkabile

Ciao

[devil89]

Ti ringrazio. Intanto ho risolto creandomi uno script apposito.

Ho fatto così e mi funziona:

<script language=""JavaScript"">
<!-- 
  function cambia(ImageName,ImageFile){
    ImageName.src = ImageFile;
  }
// -->
</script>

E sulla riga HTML ho inserito:

<a href="link" 
onMouseOver="cambia(pulsante1,'immagini/pulsanti/5.gif')" 
onClick="cambia(pulsante1,'immagini/pulsanti/4.gif')" 
onMouseOut="cambia(pulsante1,'immagini/pulsanti/4.gif')">
[img]immagini/pulsanti/4.gif[/img]
</a>

[fcaldera]

pensavo che avendo postato sul forum CSS fossi interessato ad una soluzione priva di script

[devil89]

Si infatti. Momentaneamente mi ero arrangiato. Ma ero proprio interessato alla versione CSS.

Quindi ti ringrazio, userò il tuo codice.

[Another-Life]

In termini di caricamento qualcuno ha gia verificato quale delle due è la migliore soluzione?? :master: