Changement d'image périodique
Bonjour,
J'ai intégré sur ma page un petit code javascript pour changer une image affichée toute les 10 secondes par une autre. voir l'extrait de code ci-dessous (le début de la page). ça marche mais problème, fréquemment et sur firefox notamment, la page tressaute au changement d'image et c'est très désagréable pour mes utilisateurs ... je sais pas ce qui se passe exactement, je vois pourquoi le navigateur rechargerait la page ? avez vous une idée ? Merci d'avance
J'ai déjà essayé de mettre le run_img_loop dans le script au lieu du onload dans le tag body mais ça change rien.
(il y a un javascript de gestion de bulle et un style aussi au début de la page)
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <html>
<head>
<script type="text/javascript">
function chg_img() {
if (image==1) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon.jpg' title='medaillon' id='1'>"; image=2;
} else if (image==2) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_a.jpg' title='medaillon_a' id='2'>"; image=3;
} else if (image==3) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_b.jpg' title='medaillon_b' id='3'>"; image=4;
} else if (image==4) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_c.jpg' title='medaillon_c' id='4'>"; image=5;
} else if (image==5) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_d.jpg' title='medaillon_d' id='5'>"; image=6;
} else if (image==6) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_e.jpg' title='medaillon_e' id='6'>"; image=7;
} else if (image==7) {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_f.jpg' title='medaillon_f' id='7'>"; image=8;
} else {
document.getElementById("img_loop").innerHTML="<img border='5' src='medaillon_g.jpg' title='medaillon_g' id='8'>"; image=1;
}
}
function run_img_loop() {
image=1;
timer=setInterval("chg_img()",10000);
}
run_img_loop();
</script>
<script LANGUAGE="javascript">
<!--
function ouvrepopup(filename) {
window.open(filename, "Magic", "toolbar=no, location=no, directories=no, status=yes, scrollbars=yes, resizable=no, copyhistory=no, width=610, height=490, left=200, top=140");
}
function GetId(id) {
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposéepar TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
//-->
</script>
<style type="text/css" media="all">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
</style>
</head>
<body bgcolor="#FFFFCC">
<div id="curseur" class="infobulle"></div>
<table width="90%" height="100%" border=0>
<tr>
<td valign="top">
<center>
<!--<img border="5" src="medaillon.jpg"><br>-->
<div id="img_loop"><img border="5" src="medaillon.jpg" title='medaillon' id="1"></div> |
