begin process at 2012 02 11 03:39:00
  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 :
6 / 10 - par 3 personnes
6,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é :14 914 / 1 660
Auteur : Guechtouli_Madani

Ecrire un message privé
Commentaire sur cette source (9)
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 EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
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

Commentaire de sartoz le 12/01/2011 20:34:30 10/10

super code merci

Commentaire de aoki77 le 19/02/2011 01:32:05

Bonjour et merci pour ce code !

je voudrais savoir si il serait possible d'afficher ces images aléatoirement ?

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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,718 sec (4)

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)