Partage

comment changer une image après x secondes

pour faire tourner des images dans le même bloc

Sujet résolu

6 janvier 2009 à 12:26:04

bonjour,

j'ai un petit problème pour charger des images en fonction du temps. j'aimerais charger une image après 10 secondes (par exemple), mais qu'elle remplace la précédente. elle même sera remplacée 10 secondes après par une suivante, pour revenir à la 1ere image après (etc etc etc)

j'ai fais des recherches sur le net (et ici biensûr), mais rien de convenable

il serait possible que vous m'orientiez svp ? j'ai des connaissances très basiques en javascript. est ce que je peux charger une image avec "echo" ? :euh:

je ne pense pas, mais je demande quand même :euh:

en fait j'aimerais faire :
1- la page se charge avec une image
2- (en restant sur un exemple de 10 secondes) après 10 secondes, tu charges une autre image (avec un while je suppose)
3- même chose.
4- retour à la 1ere image, etc etc etc

merci pour vos réponses.

ps: est ce mieux de faire ça en javascript ou en php ?

ps²: je ne crée pas un seul gif parce que chaque image servira de lien.

Anonyme

6 janvier 2009 à 12:47:55

window.onload = function () {
    var imgs = ["tonimage3.jpg","tonimage2.jpg","tonimage.jpg"],
        image = document.getElementById("tonimage"),
        index = 0;
    function hop () {
        image.src= imgs[(index++)%imgs.length];
    };
    cool = setInterval(hop,10000);
    // pour arreter mettre clearInterval(cool); quelque part
};

Midooo

6 janvier 2009 à 13:32:41

merci pour ta réponse. mais pourrais tu préciser quelques points stp ?

var imgs = ["tonimage3.jpg","tonimage2.jpg","tonimage.jpg"],

il faut bien que je donne le chemin des images je suppose

(par exemple, je remplace "tonimage3" par ""images/essai_tenkaichi3.png"")

image = document.getElementById("tonimage"),

que faut il que je mette à la place de "tonimage" là ? c'est l'imae de base du bloc ?

je pose quelques questions parce que j'ai testé ce code :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<SCRIPT language=javascript>
		window.onload = function () 
		{
		    var imgs = ["images/essai_tenkaichi3.png","images/essai_burst_limit.png","images/essai_dbz_film.png"],
		        image = document.getElementById("images/essai_tenkaichi3.png"),
		        index = 0;
		    function hop ()
			{
		        image.src= imgs[(index++)%imgs.length];
		    };
		    cool = setInterval(hop,10000);
		    // pour arreter mettre clearInterval(cool); quelque part
		};
	</SCRIPT>

	</head>
	<body>
    <p>bienvenue sur ma page... </p>
	</body>
</html>

et ça n'a rien donné

merci pour ta réponse.

Elias le Vert

6 janvier 2009 à 13:37:02

La fonction getElementById() repère un élément existant dans la page en fonction de son id. Dans ton cas, ce doit être l'image dynamique. Tu dois donc mettre dans ton code :

<img src="" id="tonimage" />

Et c'est la source (src) de cette image (repérée par son id) qui sera modifiée.
Tu peux déjà y mettre quelque chose en source, ce sera l'image affichée lors du chargement de la page.

Midooo

6 janvier 2009 à 13:44:44

youhou !

ça marche

. il va falloir que je bidouille un peu les paramètres (surement le "10000"), parce que je trouve que c'est un peu long en fait. mais j'ai testé et ça marche, c'est le principal.

merci beaucoup

bat538

6 janvier 2009 à 14:34:41

Bonjour, je suis intéressé par le sujet mais il y a une ligne de ce code que je ne comprend pas et je n'aime pas ne pas comprendre

image.src= imgs[(index++)%imgs.length];

Dans cette ligne, le "%" signifie donc que c'est le reste de la division qui sera renvoyé à la fonction? et donc index montera autant de fois que l'image change c'est ça?
Merci de confirmer!

Anonyme

6 janvier 2009 à 17:27:52

oui. je suppose que la page va pas rester affichée 10 ans, +1 toutes les 10 secondes ça doit être gérable dans un float.

Midooo

7 janvier 2009 à 11:02:37

non la page ne sera surement pas affichée 10 ans

(à moins de tomber sur un psycho visiteur fou @_@" et encore, il faudrait que la page ne soit pas rechargée, ni que le pc ne redémarre :-°

)

mais j'ai une petite question sur le code aussi. "cool", c'est quoi ? c'est une variable quelconque ? (pas déclarée) ou c'est un opérateur ? merci

et sinon, autre petite question, qui là n'a pas rapport avec le code déjà existant. est ce qu'il est possible d'intégrer du html dans le javascript ? o_O

je croyais que oui, mais apparemment ça marche pas

par exemple, ça donnerait ça :

var imgs = ["<a href="/page/jeux/tenkaichi3.php"><img src="images/essai_tenkaichi3.png"></a>",
"<a href="..."><img src="images/essai_burst_limit.png"></a>",
"<a href="..."><img src="images/essai_dbz_film.png"></a>],
    image = document.getElementById("images/essai_tenkaichi3.png"),
    index = 0;

comme vous pouvez le voir... le javascript n'aime pas ça :/. hier j'ai testé en mettant des apostrophes ' à l'intérieur des guillemets " mais ça n'a pas fonctionné pour autant

merci pour vos réponses >_<

Anonyme

7 janvier 2009 à 11:12:41

t'as pas la quote avec javascript toi hein ?

"cool" c'est une super variable (tout court). Elle contient la référence du setInterval, des fois que t'ai envie de l'arreter (avec clearInterval).

imgs = ['<a href="/page/jeux/tenkaichi3.php"><img src="images/essai_tenkaichi3.png"></a>',
'<a href="..."><img src="images/essai_burst_limit.png"></a>',
'<a href="..."><img src="images/essai_dbz_film.png"></a>'],

Magie!™

Midooo

7 janvier 2009 à 11:16:38

du coup j'y étais presque non ?

t'as englobé chaque image par un double apostrophe ' ' ?

en tout cas merci pour ton aide

Anonyme

7 janvier 2009 à 11:21:05

en effet tu y était presque. tu pouvais aussi échapper les quotes internes avec \" mais c'est mieux comme j'ai fait, moins chiant

t'as 2 styles de quotes pour les chaines de caractères et qui font la même chose (pas comme en php…) autant en profiter (:

Midooo

7 janvier 2009 à 11:32:25

arf @_@" le code a l'air bon (il l'est surement ^^) mais... apparemment le serveur a du mal à le digérer :/

voici l'adresse du site, au cas où. en fait la 1ere image s'affiche, mais après la boucle ne fonctionne pas (en tout cas sur firefox...). après un rapide test, ça ne fonctionne pas non plus sur opéra ni safari.

je vais essayer en faisant des \". toute façon c'est du bidouillage non ?

donc je remet le sujet en "non résolu" >_<

edit: ça a l'air de considérer les 3 images en une seule, et du coup ça mélange un peu toutes les adresses @_@" (ça donne quelque chose comme ça : " http://chezlorenzo.e3b.org/%3Ca%20href [...] 22%3E%3C/a%3E " du coup, forcément, rien ne s'affiche :colere2:

(là le code est revenu à la "1ere" façon, avec des simples quotes.)

Anonyme

7 janvier 2009 à 11:54:07

src="<a href="/pages/jeux/dbz_burst_limit.php"><img src="2.png"></a>".

oui y'a un problème. pas le temps d'expliquer, mais c'est normal. une ame charitable qui a le temps?

Elias le Vert

7 janvier 2009 à 12:06:54

Je prends le relai, donc

Le script change la propriété "src" de l'image, son adresse, donc. Par conséquent, ce que tu dois mettre dans ton tableau "imgs", ce sont uniquement des adresses d'images [des choses pouvant être mises en src dans une balise <img>]. Tu ne peux pas y mettre des liens, ou n'importe quoi d'autre en html, uniquement une adresse d'image.
Si tu veux changer carrément le lien et l'image, il faut t'y prendre autrement : au lieu de remplacer le src de l'image, tu dois changer tout le contenu de ta div "boucle".

Pour ce faire, commence par mettre de l'html correcte dans ton array [ce que tu y as mis actuellement, ce sont juste des liens autours d'un texte, pas autours d'une image] :

var imgs = ['<a href="/pages/jeux/dbz_tenkaichi3.php"><img src="3.png" /></a>',
			'<a href="/pages/jeux/dbz_burst_limit.php"><img src="2.png" /></a>',
			'<a href="/pages/general/film.php"><img src="1.png" /></a>']

Après cela, au lieu de remplacer le src, ton code va devoir remplacer le contenu d'une div, soit sa propriété innerHTML. Pour commencer, tu ne dois donc plus repérer l'image, mais la div (toujours en fonction de son id) :

image = document.getElementById("boucle")

Puis ta fonction doit changer son contenu [innerHTML] :

image.innerHTML= imgs[(index++)%imgs.length];

La fonction finale est donc la suivante :

window.onload = function () 
{
	var imgs = ['<a href="/pages/jeux/dbz_tenkaichi3.php"><img src="3.png" /></a>',
	'<a href="/pages/jeux/dbz_burst_limit.php"><img src="2.png" /></a>',
	'<a href="/pages/general/film.php"><img src="1.png" /></a>'],
		image = document.getElementById("boucle"),
		index = 0;
	function hop ()
	{
		image.innerHTML = imgs[(index++)%imgs.length];
	};
	cool = setInterval(hop,4000);
	// pour arreter mettre clearInterval(cool); quelque part
};

Midooo

7 janvier 2009 à 12:19:04

ça marche !

merci pour le code et les explications. maintenant il faut que je sache refaire ça tout seul

(en modifiant les images et le temps d'affichage, mais ça va aller)

donc en fait le code de nod_ était bon pour les images, le soucis venait de la div si j'ai bien compris (je prenais la div de l'image contenu dans la div "boucle" au lieu de la div "boucle")

il me reste à mettre une petite propriété css dans cette div pour enlever le contour des liens, et ça devrait le faire

.

allez, je met le sujet en "résolu", en espérant que ça soit bon pour de bon ^^;. re merci pour votre aide

Midooo

21 janvier 2009 à 10:51:20

bonjour,

j'ai un soucis d'affichage avec ton script nod_

. ça marche bien, la boucle fonctionne, ça met bien le temps que j'indique avant de charger une image, mais... des fois (et pas tout le temps, c'est peut être ça le pire) et même assez souvent, les images "s'enlèvent". comment expliquer :euh:

.

en fait, les images restent bien dans le cache du navigateur quand elles se chargent non ? et donc, pour une plus grande rapidité, quand le visiteur repasse sur la page, l'image vient directement du cache, plutôt que de venir du seveur non ? :euh:

(je pense avoir cerné le principe

)

mais là, ça a l'air de carrément recharger depuis le serveur >_<.

j'ai vérifié avec opéra et safari, ça fait pareil (donc ça vient pas du cache de firefox), j'ai essayé sur le pc du coloc, et ça fait pareil. pas cool tout ça.

je me demande si je vais pas plancher sur une version flash de cette boucle.

edit: voici le code javascript que j'ai dans la page.

<script language=javascript>
window.onload = function () 
{
	var imgs = ['<a href="/pages/jeux/dbz_tenkaichi3.php"><img src="/images/banniere_tenkaichi3.png" /></a>',
	'<a href="/pages/jeux/dbz_burst_limit.php"><img src="/images/banniere_burst_limit.png" /></a>',
	'<a href="/pages/general/film.php"><img src="/images/banniere_film.png" /></a>',
	'<a href="/pages/general/liste_episode_dbz.php"><img src="/images/banniere_liste_episode_dbz.png" /></a>'],
		image = document.getElementById("boucle"),
		index = 0;
	function hop ()
	{
		image.innerHTML = imgs[(index++)%imgs.length];
	};
	cool = setInterval(hop,6000);
	// pour arreter mettre clearInterval(cool); quelque part
};
</script>

et ça amène au code html suivant (plus bas dans la même page)

<!-- cadre contenant les images qui tournent en boucle, chaque image est un lien - taille : 760*150 -->
<div id="boucle">
	<img src="/images/banniere_tenkaichi3.png" id="image_boucle" />
</div>

merci pour vos réponses.

SRL Killing

21 janvier 2009 à 15:36:28

Utilise plutot le dom dans son integralité :
créer une image englobés d'un lien :

<a href=#" id="tonlien"><img src="" id="tonimage" /></a>

window.onload = function () {
    var imgs = ["tonimage3.jpg","tonimage2.jpg","tonimage.jpg"],
         liens = ["lien3","lien2","lien1"],
         image = document.getElementById("tonimage"),
         lien = document.getElementById("tonlien"),
         index = 0;
    function hop () {
        image.src= imgs[(index++)%imgs.length];
        lien.href= liens[(index++)%liens.length];
    };
    cool = setInterval(hop,10000);
    // pour arreter mettre clearInterval(cool); quelque part
};

Sa devrait marché

Midooo

21 janvier 2009 à 16:22:36

je vais essayer ça et je te tiens au courant. merci pour ta réponse.

edit: il y a un problème. j'ai beau regarder le code, je ne vois pas ce qui ne va pas. j'ai mis 4 liens et 4 images, mais seules 2 images s'affichent et 2 liens se font (et biensur les images et les liens qui viennent ne correspondent pas

... c'est pas drôle sinon >_<

)

voici le code que j'ai mis... j'ai vérifié, il n'y a pas de faute dans les liens ou dans les image @_@"

<script language="javascript">
	window.onload = function () 
	{
		var imgs = ["/images/banniere_tenkaichi3.png","/images/banniere_burst_limit.png","/images/banniere_film.png","/images/banniere_liste_episode_dbz.png"],
		liens = ["/pages/jeux/dbz_tenkaichi3.php","/pages/jeux/dbz_burst_limit.php","/pages/general/film.php","/pages/general/liste_episode_dbz.php"],
		image = document.getElementById("tonimage"),
		lien = document.getElementById("tonlien"),
		index = 0;
		function hop () 
			{
			image.src= imgs[(index++)%imgs.length];
			lien.href= liens[(index++)%liens.length];
			};
		cool = setInterval(hop,6000);
		// pour arreter mettre clearInterval(cool); quelque part
	};
</script>

avec le html qui va avec :

<div id="boucle">
<!--	<img src="/images/banniere_tenkaichi3.png" id="image_boucle" />		-->
	<a href=#" id="tonlien">	<img src="" id="tonimage" />	</a>
</div>

Anonyme

21 janvier 2009 à 17:18:04

normal. Avec le code de Zoro tu incrémentes deux fois "index";

var i = (index++)%imgs.length;
image.src= imgs[i];
lien.href= liens[i];

erreur bête de sa part.

Midooo

21 janvier 2009 à 17:35:44

que j'aurais peut être pu (du ?) trouver :euh:

. mais merci pour ta réponse nod_.

edit: ça marche