rollover su immag. A per mostrare immag. B di posizione e dimensioni diverse da A

**Tinette** · 24-04-2006, 12:25

Non so come ottenere questo effetto: ho una pagina con quattro bottoni (immagini gif) che uso per la scelta lingue.
Vorrei ottenere che passando su uno mi venga visualizzata un'immagine specifica di dimensioni e posizione completamente diverse. Uscendo l'immagine dovrebbe sparire.
In pratica io passo sopra buttITA.gif che ho in alto a sinistra e in coda ad una immagine fissa mi deve comparire un'immagine contenente una scritta in italiano, che sarà in basso a destra. Se passo sopra buttDE.gif la scritta sarà in tedesco, ecc. Levando il mouse dal bottone la scritta sparisce.
Niente è fare un rollover classico, ma su questo mi sono bloccata e non sono riuscita a trovare nel forum ciò che volevo... o se c'è io non l'ho capito.

Potete aiutarmi? Grazie.

**seed_squall_it** · 24-04-2006, 15:42

Ti conviene usare due funzioni (una per lo stato di mouseover e l'altra per il mouseout) che gestiscono anche la source dell'immagine con la scritta. Le due funzioni accettano come parametro una stringa che corrisponde alla lingua e in base a quella modificano la source del pulsante corrispondente e quella dell'immagine con la scritta. Devi preparare anche un'immagine (notesto.gif nel codice seguente) che viene impostata per default al posto di quella con la scritta quando il mouse non si trova su nessun pulsante. Nel dettaglio, eccoti il codice (ho modificato il nome delle immagini dei pulsanti indicando la lingua con due lettere e il suffisso "_off" e "_on" per indicare le immagini dei pulsanti normali e quelle dei pulsanti con il mouse sovrapposto. Inoltre ho impostato gli id per tutte le immagini in modo da poter utilizare il metodo standard getElementById()).

codice:

<head>
<script type="text/javascript">
<!--[CDATA[
function btOver(lingua) {
document.getElementById(lingua).src = "butt_" + lingua + "_on.gif";
document.getElementById("testo").src = "testo_" + lingua + ".gif";
}

function btOut(lingua) {
document.getElementById(lingua).src = "butt_" + lingua + "_off.gif";
document.getElementById("testo").src = "notesto.gif";
}
]]-->
</script>
</head>
<body>

.........

[img]butt_it_off.gif[/img]
[img]butt_en_off.gif[/img]
[img]butt_fr_off.gif[/img]
[img]butt_de_off.gif[/img]

.........

[img]notesto.gif[/img]

.........

</body>

Discussione: rollover su immag. A per mostrare immag. B di posizione e dimensioni diverse da A

Strumenti discussione

Ricerca discussione

Visualizza

rollover su immag. A per mostrare immag. B di posizione e dimensioni diverse da A

Permessi di invio