Image dans l'entête d'une page

**Kris0311** · 26/08/2010, 13h47

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

**thelvin** · 26/08/2010, 14h24

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.

**Vil'Coyote** · 26/08/2010, 22h14

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.

**Kris0311** · 27/08/2010, 08h59

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

**Vil'Coyote** · 27/08/2010, 09h57

je migre ta discussion ...

**JulienC** · 27/08/2010, 14h39

Salut,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Image dans l'entête d'une page

JavaScript

Discussions similaires

Partager

Partager