Image défilante
Description
Ce script permet de faire défiler une image à travers une fenêtre de visualisation. Pour obtenir un effet intéressant, il faut choisir une image large et règler la largeur de la fenêtre de visualisation à 1/3 de la largeur de l'image. Mais tout est possible! A vous d'adapter ce code...
Petite remarque: ce code fonctionne très bien avec Firefox. Avec Internet Explorer, la mesure de largeur de la fenêtre de html est plus délicate.
Source / Exemple :
<html>
<head>
<title>Image défilante</title>
</head>
<body onLoad="init()"> <!-- déclenchement dès le chargement de la page -->
<div id="panneau" style="position:absolute;">
<img src="MonImage.jpg" name="reference"/> <!-- image à faire défiler -->
</div>
<script language="JavaScript" type="text/javascript">
FENLARGE = 400; // largeur de la fenêtre de visualisation
FENHAUT = document.reference.height; // hauteur de la fenêtre de visualisation
FENTOP = 400; // position du sommet de la fenêtre
VTS = 20; // vitesse du mouvement en milliseconde
fright = 0;
abcisse = 0; // abcisse du coin supérieur gauche de l'image
f1=0;
f2=0;
clips = "";
function init() {
// L'attrbut innerWidth ne fonctionne pas avec Internet Explorer!
fright = (((navigator.appName != "Microsoft Internet Explorer")? window.innerWidth : 1000) +FENLARGE)/2;
abcisse = fright-document.reference.width;
affiche();
}
function affiche() {
document.getElementById("panneau").style.left = abcisse; //positionnement horizontal de l'image
document.getElementById("panneau").style.top = FENTOP; //positionnement vertical de l'image
abcisse += 1;
if (abcisse>=(fright-FENLARGE)) abcisse=fright-document.reference.width;
f1=fright-abcisse;
f2=fright-FENLARGE-abcisse;
clips = "rect(0 " + f1.toString() + " " + FENHAUT.toString() + " " + f2.toString() + ")";
document.getElementById("panneau").style.clip = clips; // fenêtre de visualisation
setTimeout('affiche()',VTS); //la fonction se rappelle d'elle-même
}
</script>
</body>
</html>
Conclusion :
Petite remarque: ce code fonctionne très bien avec Firefox. Avec Internet Explorer, la mesure de largeur de la fenêtre de html est plus délicate.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.