Image dans l'entête d'une page

Version imprimable

26/08/2010, 13h47
Kris0311

Image dans l'entête d'une page

Bonjour à tous,

Je viens vers vous car je n'arrive pas à faire ce que j'aimerais avoir sur ma page, c'est à dire avoir un changement d'image automatique environ toute les 5sec dans l'entête de ma page.

Sauriez-vous comment je dois faire?

Merci d'avance.

Cordialement,
Kris
26/08/2010, 14h24
thelvin

J'envisage deux solutions principales :

- Faire un .gif animé qui change toutes les 5 secondes.

- Utiliser JavaScript avec un timer toutes les 5 secondes, qui change l'image. Je suis un peu lent avec JavaScript, je laisse les connaisseurs poster un exemple, s'ils veulent.
26/08/2010, 22h14
Vil'Coyote

Citation:

Envoyé par thelvin

J'envisage deux solutions principales :

- Faire un .gif animé qui change toutes les 5 secondes.

- Utiliser JavaScript avec un timer toutes les 5 secondes, qui change l'image. Je suis un peu lent avec JavaScript, je laisse les connaisseurs poster un exemple, s'ils veulent.

je suis plus pour la 2e solution car un gif animé si tu dispose de 20 images il faut pouvoir le charger et ça risque de prendre du temps.
27/08/2010, 08h59
Kris0311

Bonjour à vous,

Quelqu'un s'y connaitrait-il en JavaScript? et aussi ou dois-je mettre le code, dans ma page HTML ou dans mon CSS?

Kris
27/08/2010, 09h57
Vil'Coyote

je migre ta discussion ...

Salut,

Citation:

ou dois-je mettre le code, dans ma page HTML ou dans mon CSS?

CSS != JS, donc à ne surtout pas mélanger !

Logiquement, tu as une balise <img /> dans ta page. Ajoutes y un attribut "id", du style :

Code:

<img id="headerimg" src="image1.png" />

Ensuite, dans ta balise <head> de ta page HTML, ajoute le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type="text/javascript"> // Tableau contenant tous les chemins vers les images var imgs = [ 'image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png' ]; // Attention : pas de virgule à la dernière ligne currentImg = 0; // Change la source de l'image changeImg = function() { document.getElementById('headerimg').src = imgs[++currentImg]; if (currentImg == imgs.length) // Quand on arrive à la dernière image, on boucle currentImg = 0; } window.onload = function() { setInterval(changeImg, 5000); } </script>