1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Image défilante

Image défilante

4/5 (6 avis)

Vue 62 415 fois - Téléchargée 4 570 fois

Télécharger le projet
Commenter

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...

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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
arkelode Messages postés 2 Date d'inscription dimanche 17 février 2008 Statut Membre Dernière intervention 9 décembre 2009
2 déc. 2009 à 13:59
HOY HOY!

Comment faire pour faire défiler les images et les stopper à un endroit prècis à l'aide de boutons...

du genre:

http://www.no-do.ch/

Merci D'avance!
phaeton21 Messages postés 1 Date d'inscription jeudi 16 novembre 2006 Statut Membre Dernière intervention 19 novembre 2006
19 nov. 2006 à 18:07
Sympa ce script et surtout assez rare, ça fait des jours que je cherche à faire défiler automatiquement des images, sans lien, juste pour faire une animation linéaire. Seul problème, le positionnement horizontal sous Firefox. Sous IE en faisant varier la variable window.innerWidth : 1000, j'arrive à me positionner, mais sous Firefox, impossible de changer la position horizontale de la fenêtre. Bon c'est vrai que je suis assez novice. Une suggestion ??
metalcat Messages postés 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022
8 avril 2006 à 13:54
L'image défile mais à chaque recommencement, je reçois un flash de l'image à droite de la fenêtre de visualisation. L'image apparaît et disparaît en une fraction de seconde. Dommage car je l'aurais bien adoptée. Bien quand même.
Phil_Free Messages postés 275 Date d'inscription samedi 4 juin 2005 Statut Membre Dernière intervention 28 avril 2006 11
5 mars 2006 à 09:02
Salut,

Joli, j'adopte !
Merci pour le code.
kheprys Messages postés 1 Date d'inscription jeudi 2 mars 2006 Statut Membre Dernière intervention 3 mars 2006
3 mars 2006 à 20:11
Initialement, une zone de visualisation apparaît au milieu de l'écran permettant de voir une partie de l'image. Puis, progressivement, l'image complète glisse à travers cette zone de visualisation.
Afficher les 6 commentaires
S'inscrire maintenant

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.