Cambia immagine al passaggio del mouse

**rx7** · 23-10-2003, 22:27

Stò usando delle immagini come link a dei frame secondari. Per es:
[img]contatti.bmp[/img]

Vorrei, però, avere la possiblità di far apparire un'altra immagine quando ci passa sopra il mouse e che tornasse l'immagine originale quando il mouse "se ne va". Se possibile mi piacerebbe mettere anche dei tool tip text sulle stesse immagini.

:master:

**mexican** · 24-10-2003, 10:58

questo nell'head:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

questo nel body:

[img]Immagini/rollover1.gif[/img]

**rx7** · 24-10-2003, 20:05

io intendevo se era possibile fare qualcosa del genere senza ricorrere a javascript...

**Francis87** · 24-10-2003, 20:35

no. solo con js puoi farlo!

**rx7** · 24-10-2003, 20:51

Originariamente inviato da Francis87
no. solo con js puoi farlo!

E come compatibiità tra vari browser (IE, Mizilla, opera, konqueror,...) posso avere dei problemi?

**Dennis** · 24-10-2003, 20:55

Originariamente inviato da rx7
E come compatibiità tra vari browser (IE, Mizilla, opera, konqueror,...) posso avere dei problemi?

difficilmente

**rx7** · 24-10-2003, 22:38

Perchè non funziona?

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<body>

....

<A HREF="contatti.html" target="centro" onMouseOver="rollOver(contatti)" onMouseOut="rollOut(contatti)">
[img]contatti.bmp[/img]</A>

<A HREF="servizi.html" target="centro" onMouseOver="rollOver(servizi)" onMouseOut="rollOut(servizi)">
[img]servizi.bmp[/img]</A>

<A HREF="dati.html" target="centro" onMouseOver="rollOver(dati)" onMouseOut="rollOut(dati)">
[img]dati.bmp[/img]</A>

Visualizza le immagini di partenza ma a passaggio del mouse non cambia nulla

**lleffe** · 24-10-2003, 22:53

prova così:

[img]file1.gif[/img]

dove hsrc è il percorso dell'immagine di rollover.

in un file js (o nell'head della pagina):

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

come vedi, una volta inserita la funzione che gestisce il tutto, basta inserire un nuovo attributo al tag <img>...

Discussione: Cambia immagine al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

Cambia immagine al passaggio del mouse

ok un semplice rollover

Permessi di invio