Cambio Immagine

**21Edoardo96** · 22-05-2014, 16:16

Ciao,
devo fare un programma (per voi molto banale) nel quale cambio l'immagine quando ci passo sopra con il mouse, e quando esco dall'immagine ritorna l'immagine iniziale.

codice:

<html>
 <head>
  <script language="javascipt">
   function cambia()
   {
    document.getElementById("myImg").src="topo.jpg";
   }
   function ricambia()
   {
    document.getElementById("myImg").src="cane.jpg";
   }
  </script>
 </head>
<body>
 <form>
  <img src="cane.jpg"  id="myImg" onmouseover="cambia()" onmouseout="ricambia()">
  
 </form>
</body>
</html>

Ciao e grazie

**KillerWorm** · 23-05-2014, 02:37

Ciao, correggi il tag <script>, hai dimenticato una "r" in "javascript".
Ad ogni modo è preferibile scriverlo con questa sintassi:

codice:

<script type="text/javascript">

Per ottimizzare il tutto potresti creare un'unica funzione parametrizzata, in modo da passare i riferimenti dell'elemento chiamante e del file immagine.
Un esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
     function cambiaImg(me,img){
      me.src = img;
     }
    </script>
   </head>
  <body>
   <form>
    <img src="cane.jpg" onmouseover="cambiaImg(this,'topo.jpg')" onmouseout="cambiaImg(this,'cane.jpg')">
   </form>
  </body>
</html>

In questo modo potrai riutilizzare la stessa immagine per elementi diversi.

Discussione: Cambio Immagine

Strumenti discussione

Ricerca discussione

Visualizza

Cambio Immagine

Permessi di invio