Affichage d'une image avec changement quand le pointeur est dessus

Version imprimable

03/09/2006, 23h56
mauriiice

Affichage d'une image avec changement quand le pointeur est dessus

Bonjour à tous,

Voila ce que je cherche à faire:
Je veux mettre une image sur une page. Lorsque la souris passe sur l'image, l'image change (suivant un cycle de 4 images). Quand on "ressort" de l'image, l'image d'origine (la première) revient.

Je connais le code pour afficher une image ("<IMG src="url de l'image">) mais je ne sais pas comment faire pour intégrer le changement quand le pointeur passe dessus.

Merci pour vos renseignements.

Je dirais qu'il faut jouer avec les fonctions setTimeout ou setInterval (au choix)

Voici un petit exemple (c'est pas le must, vu que c'est fait rapidement :roll:)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 
<body>
<script language="javascript">
var tab = new Array('tien1.bmp','tien2.bmp','mobile2-176x220.gif');
var i = 0;
var timer = 0;
function diapo()
{
   document.getElementById('mypict').src=tab[i];
   i = (i < tab.length-1)?(i+1):0;
timer = window.setTimeout("diapo()", 5000);
}
function stopdiapo()
{
   window.clearTimeout(timer);
   document.getElementById('mypict').src = 'mobile2-176x220.gif';
   i = 0;
}
</script>
<img src="mobile2-176x220.gif" alt="" title="" id="mypict" onmouseover="diapo()" onmouseout="stopdiapo()"  />
</body>
</html>

04/09/2006, 16h29
mauriiice

Merci beaucoup pour ta réponse !

Je vais tacher d'intégrer les url des images et j'espère que j'aurais un résultat satisfaisant.

++

Un grand merci à toi !

Tout fonctionne à merveille :-)

Je mets la version final de mon code, ça aidera peut être d'autre personne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
 
<body>
 
<script language="javascript">
var tab = new Array('url_image2.jpg','url_image3.jpg','url_image4.jpg');
var i = 0;
var timer = 0;
function diapo()
{
   document.getElementById('mypict').src=tab[i];
   i = (i < tab.length-1)?(i+1):0;
timer = window.setTimeout("diapo()", 5000);
}
function stopdiapo()
{
   window.clearTimeout(timer);
   document.getElementById('mypict').src = 'url_image1.jpg';
   i = 0;
}
</script>
 
<img src="'url_image1.jpg" alt="" title="" id="mypict" onmouseover="diapo()" onmouseout="stopdiapo()"  />
 
</body>
 
</html>