CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 11 20 12:03:03

[OPEN XML] LES SPéCIFICATIONS D'OPEN XML ISO ENFIN PUBLIéES ! par neodante

SAF 2008 : DAY I par MPOWARE

PASS 2008 : RéSUMé DE LA PREMIèRE JOURNéE par christian

WINDOWS AZURE SERVICES : PREMIèRE APPLICATION - SERVICE ON THE CLOUD : JUST DO IT ! par redo

SQL SERVER KILIMANJARO : DATA-TIER APPLICATION COMPONENT - DAC par christian

RE : SELECTION DANS UN TABLEAU par saltwater08

RE : SELECTION DANS UN TABLEAU par Bul3

RE : INCOMPATIBILITé IE6/IE7 CLIC DROIT AFFICHAGE MENU PERSONNALISé par Bul3

INCOMPATIBILITé IE6/IE7 CLIC DROIT AFFICHAGE MENU PERSONNALISé par matiassa

SELECTION DANS UN TABLEAU par saltwater08

+ de logiciels à télécharger

1 291 689 membres
186 nouveaux aujourd'hui
14 519 membres club

Trouver une ressource

Trouvez une ressource parmi 39 004 codes, 1 202 892 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

IMAGE DÉFILANTE

Information sur la source

Catégorie :Graphique Classé sous : image, défilante, glissante, scroll Niveau : Débutant Date de création : 02/03/2006 Vu / téléchargé: 24 396 / 2 470

Auteur : kheprys

Ecrire un message privé

Note :

6,00 / 10

Commentaire sur cette source (5)

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()">
<div id="panneau" style="position:absolute;">
<img src="MonImage.jpg" name="reference"/>
</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

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ImageDefilante.html 1 760 octets
ref.jpg 161 436 octets

Télécharger le zip

Sources de la même categorie

ZOOM SUR IMAGE A LA SOURIS par kazma

DYNAMIQUE.JS POUR FAIRE DE JOLIE ANIMATION )) par Kimjoa

ANIMATION VIA LES ÉQUATIONS DE ROBERT PENNER par XtremDuke

SLIDESHOW MANUEL OU AUTOMATIQUE SIMPLIFIÉ par meliubaf

DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITES... par abdelaziz_info

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

CONFORTABLE AUTO DÉFILEMENT OU (SCROLL BAR) TOUT AUTOMATIQUE... par abdelaziz_info

ZOOM SUR IMAGE A LA SOURIS par kazma

DIAPO EN FONDU ENCHAINE par kazma

ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix

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

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 à un simple "<marquee>". 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<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("<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