Immagine che cambia al passaggio del mouse

[fedemarkez]

Vorrei sapere il modo piu' semplice per fare in modo che quando si passa con il mouse sopra un'immagine, l'immagine cambi con un'altra prestabilita.

Vorrei fare questa cosa senza l'utilizzo di JS e possibilmente senza lavorare sui CSS.

tanks

[bionicoz]

Originariamente inviato da fedemarkez
Vorrei fare questa cosa senza l'utilizzo di JS e possibilmente senza lavorare sui CSS.

Beh se togliamo js e css, mi sa che ci resta solo il secchiello e la paletta per farlo.

Se invece accetti di farlo almeno con css è sufficiente impostare l'immagine come sfondo di un div
e dichiarare un'altro sfondo quando il mouse è sopra quel div. Qualcosa del genere insomma.

#tuodiv{ width:300px; height:200px; background-image:url(immagine1.png);}
#tuodiv:hover{ background-image:url(immagine2.png);}

[fedemarkez]

ah ho capito, però il problema è che non posso mettere l'immagine come sfondo, ma come immagine pura.

Non c'è un'altra soluzione?

[codencode]

Puoi creare un'unica immagine costituita dall'unione, una dopo l'altra, delle due immagini che vuoi utilizzare (che chiamiamo img1 e img2).
La inserisci in un link che ha dimensioni fisse pari all'immagine che mostri di default (img1) e la posizioni in maniera tale che si veda solo questa immagine.
Al passaggio del mouse (effetto hover nel CSS) cambi la posizione dell'immagine in modo che mostri img2.

[fedemarkez]

Grazie codencode per l'idea.

Però non so come creare un immagine che ne contenga 2. Utilizzo Fireworks per la manipolazione delle immagini.

[softhare]

Sennò dovrai usare javascript.

[img]immagine1.jpg[/img]

Tutto qua!

Chiaramente cambierai immagine1.jpg ed immagine2.jpg con i nomi delle tue immagini...

Proprio non funzionasse (es non su tutti i browser) bisogna complicare (solo un po') le cose:

<SPAN ONMOUSEOVER="document.cambia.src='immagine2.jpg';r eturn true;" ONMOUSEOUT="document.cambia.src='immagine1.jpg';re turn true;">
[img]immagine1.jpg[/img]
</SPAN>

[fedemarkez]

Grazie softhare, ho usato il primo metodo suggerito e funziona

Testato sul Firefox 3.6.2 e Internet explorer 6