begin process at 2010 03 19 16:01:28
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > IMAGE DÉFILANTE

IMAGE DÉFILANTE


 Information sur la source

Note :
6 / 10 - par 3 personnes
6,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :image, défilante, glissante, scroll Niveau :Débutant Date de création :02/03/2006 Vu / téléchargé :34 990 / 3 074
Auteur : kheprys

Ecrire un message privé
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 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

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

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip IMAGE DÉFILANTE (LE PLUS SIMPLE POSSIBLE) par nicompx

Commentaires et avis

Commentaire de artderue62 le 02/03/2006 20:14:14

^^ , j'ai regarder vite fait et jvoi que au debut on voi  l'image complete et apres on voi l'image en tres petit

pour l'image en grand que l'on voi complet c'est normal ?

Commentaire de kheprys le 03/03/2006 20:11:10

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.

Commentaire de Phil_Free le 05/03/2006 09:02:08

Salut,

Joli, j'adopte !
Merci pour le code.

Commentaire de metalcat le 08/04/2006 13:54:06

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.

Commentaire de phaeton21 le 19/11/2006 18:07:04

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

Commentaire de arkelode le 02/12/2009 13:59:30

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!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

scroll d'images [ par ctx_man ] Bonjour, Je cherche un moyen de faire un scrolling d'image presque identique &#224; un simple "&lt;marquee&gt;". En faisant un code comme suit il faut positionné une image scroll aur netscape4.x [ par rochonpascal ] Bonjour, depuis une semaine j'essaie de rendre mon site compatible avec netscape 4.x, le problèeme que je rencontre c'est que lorsque j'ai des images image background et redimensionnement [ par evilfrog83 ] Comment puis-je faire pour qu'une image positionnée en temps que fond d'un tableau puisse s'agrandir et se rétrécir en fonction de la taille de celui- Changement d'image d'un autre frame [ par NiFF ] Ma page est séparée en 2, et il y a deux frames : je voudrais que lorsque le visiteur clique sur une image de la frame de gauche, elle s'afiche dans u texte sur image [ par Filou07 ] Salut,J'ai mis un texte sur une image qui me sert de bouton avec un changement de couleur du bouton au passage de la souris. Ca marche mais le texte d faire apparaitre une image [ par gothmog ] voili voilou, j'aimerai savoir comment on peut faire apparaitre une image en java scipt.mon image est cachée&lt;divstyle="position:absolute; width:181 position d'une image [ par Ferdi ] SalutDans une fenetre popup je place une image par l'instruction suivante qui se trouve dans cette meme fenetre:document.write("&lt;img src='images-tu changer des images dans un menu [ par bblein ] j'élabore un petit menu où lorsque je clique sur une image-rubrique, une flèche (image) vient se placer dessous pour indiquer que l'on se situe bien d Coordonnées d'une image [ par jeanne38 ] Bonjour,J'aimerais récupérer les coordonnées d'une image sous IE.Sous Netscape, j'utilise la propriété y et ça marche :document.mon_image.y me retourn faire défiler du texte et integrer un javascript sur une image [ par melane35 ] Bonjour, je suis toute nouvelle sur ce site et je réalise actuellement 1 site avec dreamweaver. J'ai quelques questions : il me semble qu'il est possi


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo ciel d'oragePhoto store scarecrow
  

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,030 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)