Votre question

[HTML et javascript] Affichage d'images à tour de rôle

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
2 Septembre 2006 18:45:10

Bonjour,

Je souhaiterais écrire un code qui me permettrait d'afficher une série de 5 images. Le passage d'une image à l'autre se ferait après 1 ou 2 secondes.

Pour afficher une image, je suppose que le seul code htlm suffit:
  1. <html>
  2.  
  3. <head>
  4. <title>test n°1</title>
  5. </head>
  6.  
  7. <body>
  8.  
  9.  
  10. <img src="<a href="http://ns6042.ovh.net/~abrutisv/photos/p2yfe4a3.jpg" rel="nofollow" target="_blank">http://ns6042.ovh.net/~abrutisv/photos/p2yfe4a3.jpg</a>">
  11. ...
  12. ...
  13. ...
  14. ...
  15.  
  16.  
  17. </body>
  18.  
  19. </html>


Ce que j'arrive pas à faire, c'est intégrer le changement d'image dans le même emplacement.

Je suppose que je dois me servir de javascript mais j'ai une certaine méconnaissance de ce langage.


Merci de m'aider ou de m'aiguiller sur la solution.

Autres pages sur : html javascript affichage images tour role

2 Septembre 2006 21:12:39

editeurjavascript.com
a c 232 L Programmation
2 Septembre 2006 23:01:50

pour le temps, tu peux utiliser la fonction setTimeout en javascript.
Après pour changer l'image, tu fais un document.getElementById('nom-de-ta-photo').src= "l'url de ta nouvelle image";
Contenus similaires
4 Septembre 2006 00:12:30

Merci Omar, je vais essayer.
13 Septembre 2006 16:47:42

je pense ke ce script est pa mal a vous den juger ^^

Entre les deux balises <head> et </head>
<!-- DEBUT DU SCRIPT SLIDESHOW-->

<script>



// Changer les variables suivantes
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpeg'
Pic[2] = '3.gif'
Pic[3] = '../images/perso/4.jpg'
Pic[4] = '5.jpg'

// =======================================
// Ne rien éditer au-dessous de cette ligne
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image()
preLoad.src = Pic
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<!-- FIN DU SCRIPT SLIDESHOW-->

Dans la ligne de la balise <body>
<!-- DEBUT DU SCRIPT -->
<body onload="runSlideShow()">
<!-- FIN DU SCRIPT -->



Entre les deux balises <body> et </body>
<!-- DEBUT DU SCRIPT SLIDESHOW-->
<p align="center"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table></p>
<!-- FIN DU SCRIPT SLIDESHOW-->
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS