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

Image défilante

Soyez le premier à donner votre avis sur cette source.

Vue 60 877 fois - Téléchargée 4 495 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
Signaler
Messages postés
2
Date d'inscription
dimanche 17 février 2008
Statut
Membre
Dernière intervention
9 décembre 2009
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!
Signaler
Messages postés
1
Date d'inscription
jeudi 16 novembre 2006
Statut
Membre
Dernière intervention
19 novembre 2006
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 ??
Signaler
Messages postés
73
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
20 novembre 2020
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.
Signaler
Messages postés
275
Date d'inscription
samedi 4 juin 2005
Statut
Membre
Dernière intervention
28 avril 2006
 9
Salut,

Joli, j'adopte !
Merci pour le code.
Signaler
Messages postés
1
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
3 mars 2006
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.