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

**mauriiice** · 03/09/2006, 23h56

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.

**Kerod** · 04/09/2006, 04h17

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

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mauriiice** · 04/09/2006, 16h29

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.

++

**mauriiice** · 04/09/2006, 20h21

Un grand merci à toi !

Tout fonctionne à merveille :-)

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

JavaScript

Discussions similaires

Partager

Partager