begin process at 2010 03 19 09:48:52
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > UNE AMINATION AVEC AFFICHAGE D'UN SÉQUENCE D'IMAGES, UNE PAR UNE

UNE AMINATION AVEC AFFICHAGE D'UN SÉQUENCE D'IMAGES, UNE PAR UNE


 Information sur la source

Note :
4 / 10 - par 2 personnes
4,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Niveau :Initié Date de création :13/01/2004 Vu / téléchargé :12 103 / 1 445
Auteur : Guechtouli_Madani

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

 Description

Cliquez pour voir la capture en taille normale
se script vous permit de faire annimer vous images, en fesons une sequence d'affichages, image par image, dans l'ordre que vous choisi.
Vous remarquer qu'il faut mettre vous images dans le même répertoire que votre HTML. l'HTML est au dessus.

Source

  • <html>
  • <head>
  • <title> Animaition</title>
  • </head>
  • <body>
  • <!-- afficher la 1ere image -->
  • <img src="01.jpg" border="0" alt="Hala" height=440>
  • <script type="text/javascript">
  • <!--
  • // tableau de toute la sequence
  • var b = new Array();
  • b[0] = new Image(); b[0].src = "02.jpg";
  • b[1] = new Image(); b[1].src = "03.jpg";
  • b[2] = new Image(); b[2].src = "04.jpg";
  • b[3] = new Image(); b[3].src = "05.jpg";
  • b[4] = new Image(); b[4].src = "06.jpg";
  • b[5] = new Image(); b[5].src = "07.jpg";
  • b[6] = new Image(); b[6].src = "08.jpg";
  • b[7] = new Image(); b[7].src = "09.jpg";
  • b[8] = new Image(); b[8].src = "10.jpg";
  • b[9] = new Image(); b[9].src = "01.jpg";
  • var i = 0;
  • function Animation()
  • {
  • if(i > 9) i = 0;
  • document.images[0].src = b[i].src;
  • i = i + 1;
  • window.setTimeout("Animation()",2000);
  • //On affiche chaque image pendant 2s
  • }
  • window.setTimeout("Animation()",2000);
  • //-->
  • </script>
  • </body></html> 
<html>
 <head>
   <title> Animaition</title>
  </head>
  
  <body>
  
 <!-- afficher la 1ere image  -->        
<img src="01.jpg"  border="0" alt="Hala" height=440>
<script type="text/javascript">
<!--
 // tableau de toute la sequence
 var b = new Array();
 b[0] = new Image(); b[0].src = "02.jpg";
 b[1] = new Image(); b[1].src = "03.jpg";
 b[2] = new Image(); b[2].src = "04.jpg";
 b[3] = new Image(); b[3].src = "05.jpg";
 b[4] = new Image(); b[4].src = "06.jpg";
 b[5] = new Image(); b[5].src = "07.jpg";
 b[6] = new Image(); b[6].src = "08.jpg";
 b[7] = new Image(); b[7].src = "09.jpg";
 b[8] = new Image(); b[8].src = "10.jpg";
 b[9] = new Image(); b[9].src = "01.jpg";
 var i = 0;
 

 
 function Animation()
 {
  if(i > 9) i = 0;
  document.images[0].src = b[i].src;
  i = i + 1;
  window.setTimeout("Animation()",2000);
//On affiche chaque image pendant 2s
 }

 window.setTimeout("Animation()",2000);
 
 
 
//-->
</script>
</body></html>

 Conclusion

Pour plus d'info conntecter moi sur mon e-mail.
Vous trouvez dans le ZIP dix images d'exemple.

 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 du même auteur

Source avec Zip Source avec une capture MENU DÉROULENT DANS UNE PAGE WEB
AVOIR UNE CALCULATRISE, SUR PAGE WEB.
Source avec une capture AFFICHER L'HEURE DU NAVIGATEUR DANS LA BARE DE STATUS
Source avec une capture LA DURÉE DE VISITE D'UNE PAGE WEB.
Toutes les sources de Guechtouli_Madani

 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

Commentaires et avis

Commentaire de pouicpouic le 27/02/2004 11:31:51

Je débute en javascript.
Le code marche très bien mais quand je l'insère dans une page html contenant d'autres images (avant celle que je veux animer), l'animation se met par défaut sur la première ! (ici le haut de mon cadre !) Je n'arrive pas à "l'ancrer" sur une image en particulier au milieu de ma page.
Si quelqu'un a la solution, ca m'intéresse !

Commentaire de jakinito666 le 18/04/2005 18:11:08

dans document.images[0].src

le image 0 correspond a la premiere photo dans le code html

Commentaire de nstubi le 19/11/2005 17:37:25

Hello,

Super ce petit script!

Toutefois, selon le navigateur (et plus précisément les paramètres de sécurité de celui-ci) du client, il faut autoriser le contenu actif. L'animation est alors désactivée...

Y-a-t'il un moyen de contourner ce problème?

Commentaire de chak63000 le 15/04/2007 23:10:57

Merci pour le script ... au juste, pour éviter le probleme de "document.images[0].src", parce qu'on ne sait jamais quel est le numéro de la photo cible, on peut aussi
nommer l'image avec
<img src="image.gif" width="140" height="76" name="toto">

et remplacer
document.images[0].src = b[i].src;
par
document.images["toto"].src = b[i].src;

Commentaire de Papoux123 le 17/12/2007 21:22:54

Bonjour. Je ne comprend pas trop le prioncipe de mettre les images dans le même répertoire que votre HTML? est-il possible d'avoir plus d'informations svp?

Merci

Jacques

Commentaire de jr5818 le 26/06/2008 15:43:12

Bonjour, très bien ce site mais comment faire pour que les images s'affichent aléatoirement ?
merci pour qui aura la réponse.
à bientôt

Commentaire de xmO77 le 17/02/2010 11:52:11

Bonjour je suis sous firefox, et je n'arriv pas O_o

Dsl de relancer un sujet si vieux mais je débute et je voudrais bien connaître le html et javascript, pour peut etre un jour en faire mwa meme =)))


le code que j'ai ==

--------------------------

# <img src="http://www.informanews.net/imagenews/panasonicTV_Google.jpg" border="0" alt="Hala" height=440>
# <script type="text/javascript">
# var b = new Array();
# b[0] = new Image(); b[0].src = "http://blogue.biotope.ca/wp-images/google-chrome-logo.png";
# b[1] = new Image(); b[1].src = "http://www.informanews.net/imagenews/panasonicTV_Google.jpg";
# b[2] = new Image(); b[2].src = "http://www.onlineradio.fr/wp-content/uploads/2009/09/google.jpg";
# b[3] = new Image(); b[3].src = "http://www.abondance.com/Bin/google-dollars.jpg";
# b[4] = new Image(); b[4].src = "http://blogs.lexpress.fr/e-veille-marketing/google_youtube_400q.jpg";
# b[5] = new Image(); b[5].src = "http://businessenligne.files.wordpress.com/2009/04/google1.jpg";
# b[6] = new Image(); b[6].src = "http://www.geoinweb.com/wp-content/uploads/2007/WindowsLiveWriter3/ExclusifGoogleLocationGooglepeutvousgolo_CB94/google_watching_you_independent_newspaper_24_may_20071.png";
# b[7] = new Image(); b[7].src = "http://www.seopob.com/img/logo-google-chrome.jpg";
# b[8] = new Image(); b[8].src = "http://www.alpha-geek.fr/public/eau_de_toilette_google_2.jpg";
# b[9] = new Image(); b[9].src = "http://innovationweb.branchez-vous.com/upload/2007/06/google-street-view.jpg";
# var i = 0;

# function Animation()
# {
# if(i > 9) i = 0;
# document.images[0].src = b[i].src;
# i = i + 1;
# window.setTimeout("Animation()",2000);
# }
# window.setTimeout("Animation()",2000);
# </script>

-------------------------

merci a tous...



xmO

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


HTC Magic
Entre 429€ et 429€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo hvar - 2 
  

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 : 0,421 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)