script de défilement d'image (marche seulement sans serveur web "sous FireFox")
salut, je travail sur un site en php/mysql.
je viens d'integrer un scripte pour un défilement horizontale d'image.
pour etre plus claire voici le code de la page scroll.html :
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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
.conteneur{
overflow: hidden;
padding: 5px;
height: 150px;
width: 100px;
}
.image{
height: 150px;
width: 100px;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 0px;
cursor: pointer;
}
</style>
<script type="text/javascript">
var chemin = "livres\\";
var tabImg = new Array("intelligent01.jpg","marie01.jpg","marie02.jpg","s&v01.jpg","automne.jpg");
var attente = "3000"; //délai d'affichage d'une image en ms
// Action à réaliser lors du clic sur l'image
// Les id des images sont de la forme "imgX" avec X l'indice de l'image dans le tableau tabImg
function clicSurImage(objImg)
{
alert(objImg.id);
}
/*********************************************************/
//***** Fonctions du diaporama *****//
var tempo = "2";
var pas = 2;
var chrono;
var posFin, conteneur, sens;
// Ajout des images dans le div conteneur
function creationDiaporama()
{
var v, imgDiapo;
var conteneur = document.getElementById("conteneur");
var elnobr = document.createElement("nobr");
for (v=0; v<tabImg.length; v++)
{
imgDiapo = document.createElement("img");
imgDiapo.id = "img"+v;
imgDiapo.src = chemin+tabImg[v];
imgDiapo.className = "image";
imgDiapo.objetImage = imgDiapo;
imgDiapo.onclick = function(){clicSurImage(this.objetImage);}
elnobr.appendChild(imgDiapo);
}
conteneur.appendChild(elnobr);
chrono1 = setTimeout("deroule()",attente);
}
function deroule()
{
var distance;
conteneur = document.getElementById("conteneur");
distance = conteneur.scrollWidth / tabImg.length;
if (conteneur.scrollLeft + distance >=conteneur.scrollWidth)
{
sens = -1;
}
if (conteneur.scrollLeft<distance)
{
sens = 1;
}
posFin = conteneur.scrollLeft + sens * distance;
chrono = setTimeout("defileImage()", tempo);
}
function defileImage()
{
conteneur.scrollLeft = conteneur.scrollLeft + sens * pas;
if (sens == 1)
{
if (conteneur.scrollLeft<posFin)
chrono = setTimeout("defileImage()", tempo);
else
chrono = setTimeout("deroule()",attente);
}
else
{
if (conteneur.scrollLeft>posFin)
chrono = setTimeout("defileImage()", tempo);
else
chrono = setTimeout("deroule()",attente);
}
}
// Réinitialisation du diaporama
function stopDiaporama()
{
clearTimeout(chrono);
document.getElementById("conteneur").scrollLeft = 0;
}
</script>
</head>
<body onload="creationDiaporama()" onunload="stopDiaporama()">
<div class="conteneur" id="conteneur">
</div>
<div id="idTest"></div>
</body>
</html> |
Avec FireFox si je lance directement cette page, avec un double cliques (file:///E:/wamp/www/bibday/scroll.html), le défilement fonctionne. Mais par contre si je passe par le serveur web (wamp) ((http://localhost/bibday/scroll.html) ça ne marche pas !!!!!
Et sous internet explorer ça marche dans les deux cas !!!!
c'est bizar non !!!