Esempio js cambio immagine

**Valeria75_bis** · 05-11-2010, 22:38

Ciao a tutti, sto cercando un esempio che al posizionamento su un'immagine mi cambi l'immagine selezionata e una presente in un box superiore.

Praticamente ho una pagina con 4 immagini (4 pulsanti) e un'area centrale con un'immagine di default, vorrei fare in modo che posizionandomi su ogni pulsante venga visualizzata un'immagine differente per il pulsante e contemporante venga cambiata anche l'immagine di default.

Potete aiutarmi?

Grazie

**zoomers84** · 06-11-2010, 17:13

Inserisci questo codice nell'head

codice:

<script type="text/javascript" language="javascript">

var bufferImage = new Array();
function Buffer(filename) {
var i = bufferImage.length;
bufferImage[i] = new Image();
bufferImage[i].src = filename;
}
function vedifoto(filename) {
document.images[Image_Name].src = filename;
}
Image_Name = "showpad";
Buffer("immaginechedevecambiareinquellaeprincipale.jpg");
...
...
ecc..

</script>

dove nel buffer devi metterci le varie immagini che devi caricare per fargliele caricare all'inizio di tutto

imposti in questo modo il link con l'immagine

codice:

<a href="xxxxx.htm" onmouseover="vedifoto('immaginechedevecambiareinquellaprincipale.jpg')" onmouseout="vedifoto('immagineprincipalebase.jpg')>
[img]immaginelink.jpg[/img]
</a>

e imposti così l'immagine principale al centro che dovrà cambiare al passaggio del mouse sull'immagine del link

codice:

[img]desc_princ.png[/img]

**Valeria75_bis** · 06-11-2010, 23:12

Prima di tutto grazie per l'aiuto!!!!

ho provato a ci sono quasi, solo non mi cambia l'immagine del pulsante (mentre viene cambiata l'immagine centrale)

non capisco inoltre perchè

<a href="xxxxx.htm" onmouseover="change_img('center2.jpg')" onmouseout="change_img('center.jpg')">

onmouseout cambia solo l'immagine centrale e non ripristina l'immagine del pulsante iniziale (ovvero quando non è selezionato)

codice:

<script type="text/javascript" language="javascript">

var bufferImage = new Array();
function Buffer(filename) {
var i = bufferImage.length;

bufferImage[i] = new Image();
bufferImage[i].src = filename;
}

function change_img(filename) {
document.images[Image_Name].src = filename;
}
Image_Name = "showpad";
Buffer("center1.jpg");
Buffer("center2.jpg");
Buffer("center3.jpg");
Buffer("center4.jpg");

</script>

</head>

<body>
<table width="394" border="0" align="center">
  <tr>
    <td colspan="4"><div align="center">
      

[img]center.jpg[/img]</p>
    </div></td>
  </tr>
  <tr>
    <td>
		<a href="xxxxx.htm" onmouseover="change_img('center2.jpg')" onmouseout="change_img('center.jpg')">

[img]1.jpg[/img]</a>	</td>
    <td>[img]2.jpg[/img]</td>
    <td>[img]3.jpg[/img]</td>
    <td>[img]4.jpg[/img]</td>
  </tr>
</table>
</body>
</html>

**cavicchiandrea** · 07-11-2010, 13:18

Io farei cosi:

codice:

<body>
<table width="394" border="0" align="center">
  <tr>
    <td colspan="4"><div align="center">
      

[img]center.jpg[/img]</p>
    </div></td>
  </tr>
  <tr>
    <td>
		<a href="xxxxx.htm" onmouseover="document.getElementById('showpad').src='center2.jpg'" onmouseout="document.getElementById('showpad').src='center.jpg'">

[img]1.jpg[/img]</a>	</td>
    <td>[img]2.jpg[/img]</td>
    <td>[img]3.jpg[/img]</td>
    <td>[img]4.jpg[/img]</td>
  </tr>
</table>
</body>

Nel caso che le immagini siano molto pensati e molte nella pagina, in questo caso sarebbe il utile/consigliato creare un array per precari-care il tutto all'onload della pagina

consigli:
@Valeria75_bis Un ripassino al js lo prenderei in considerazione.
@zoomers84 Script un po troppo elaborato per semplice swap/rollover e molto ie stile (il dom è + cross-browser).

Discussione: Esempio js cambio immagine

Strumenti discussione

Ricerca discussione

Visualizza

Esempio js cambio immagine

Permessi di invio