Partage

changer d' image toutes les x secondes

Sujet résolu

Le 19 avril 2011 à 12:22:59

bonjour

Je voudrais faire changer une image toutes les 20 secondes avec Javascript ou afficher une image par défaut si Javascript n'est pas activé.

Comment faire ?

Merci.

Le 19 avril 2011 à 12:22:59

LE Codeur Du Samedi

Le 19 avril 2011 à 12:52:57

Salut,

Tout d'abord par défaut je te conseillerais de mettre comme src une image indiquant que le JS n'est pas actif dans le code HTML de base.
<img src="jspasactif.png" />

Ensuite pour changer la valeur d'un objet en Javascript on y accède par le DOM. Autrement dit tu dois commencer par attribuer un id unique à ton image (c'est pas nécessairement obligatoire, mais ça facilite grandement les choses).Disons "masuperimage" :
<img id="masuperimage" src="jspasactif.png" />

Le code JS maintenant.

// Un tableau qui va contenir toutes tes images.
var images = new Array();
images[] = "image1.png";
images[] = "image2.gif";
images[] = "lipsum.jpg";

var pointeur = 0;

function ChangerImage(){
document.getElementById("masuperimage").src = images[pointeur];

if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}

window.setInterval("ChangerImage()", 20000)
}

// Charge la fonction
window.onload = function(){
ChangerImage();
}

Voila le code en gros.
A toi de l'adapter

Tchuss

basco

Le 19 avril 2011 à 13:06:46

Merci mais ceci affiche l'image par défaut mais il n'y a pas d'actualisation.

Si je remplace src="jspasactif.png"
par src=""
cela affiche une image vide (manquante) comme si l'adresse de l'image était fausse.

d'ou viens l'erreur ?

mon code au cas ou...

<IMG src="entete.jpg" width="950" height="120" name="masuperimage" />

<SCRIPT language="JavaScript" type="text/javascript"> 
// Un tableau qui va contenir toutes tes images.
var images = new Array();
images[] = "1.jpg";
images[] = "2.jpg";
images[] = "entete.jpg";

var pointeur = 0;

function ChangerImage(){
document.getElementById("masuperimage").src = images[pointeur];

if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}

window.setInterval("ChangerImage()", 20000)
}

// Charge la fonction
window.onload = function(){
ChangerImage();
}
</SCRIPT>

LE Codeur Du Samedi

Le 19 avril 2011 à 13:26:00

Tu as utilisé un attribut name, c'est un id qu'il faut mettre à ton image

-> <img src="(...)" id="masuperimage" />

basco

Le 19 avril 2011 à 13:31:10

Ok modifier mais même problème...

mon code

<IMG src="" width="950" height="120" id="masuperimage" />


<SCRIPT language="JavaScript" type="text/javascript"> 
// Un tableau qui va contenir toutes tes images.
var images = new Array();
images[] = "1.jpg";
images[] = "2.jpg";
images[] = "entete.jpg";

var pointeur = 0;

function ChangerImage(){
document.getElementById("masuperimage").src = images[pointeur];

if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}

window.setInterval("ChangerImage()", 5000)
}

// Charge la fonction
window.onload = function(){
ChangerImage();
}
</SCRIPT>

LE Codeur Du Samedi

Le 19 avril 2011 à 13:46:58

Ouille désolé, une petite confusion entre JS et PHP =/
En effet les Array en JavaScript sont des objets. Autrement dit pour rajouter des éléments dedans il faut utiliser la méthode push().

Donc ton code :

var images = new Array();
images.push("1.jpg");
images.push("2.jpg");
images.push("entete.jpg");

J'espère que ça devrait le faire maintenant

basco

Le 19 avril 2011 à 13:51:25

Merci c'est mieux mais seul les 2 premier change alternativement la troisième est ignorée.

LE Codeur Du Samedi

Le 19 avril 2011 à 13:54:55

Ah bah ouais :
if(pointeur < images.length - 1)

Ce code me semble plus approprié.
if(pointeur < images.length)

C'est du code que j'ai tapé à la volée, j'ai pas fait super attention du coup

(On va y arriver ... on va y arriver

)

basco

Le 19 avril 2011 à 13:58:24

Merci pour tes effort
Mais là les 2 premières c'est ok puis c'est des images vide.

si sa peu aider, j'ai récupéré la valeur du pointeur :

img 1 = valeur de pointeur 0
img 2 = valeur de pointeur 1
img 3 = valeur de pointeur 3 au lieu de 2

LE Codeur Du Samedi

Le 19 avril 2011 à 17:49:40

Ah bizzare tout ça,
je testerai le code ce soir chez moi, à mon avis ça doit être une erreur toute bête

basco

Le 20 avril 2011 à 2:13:30

J'ai remplacé "setInterval" par "setTimeout" et sa marche !

Nouveau code

<img src="jspasactif.png" width="950" height="120" id="masuperimage" />

<SCRIPT language="JavaScript" type="text/javascript">

// Un tableau qui va contenir toutes tes images.
var images = new Array();
images.push("1.jpg");
images.push("2.jpg");
images.push("3.jpg");

var pointeur = 0;

function ChangerImage(){
document.getElementById("masuperimage").src = images[pointeur];

if(pointeur < images.length - 1){
pointeur++;
}
else{
pointeur = 0;
}

setTimeout("ChangerImage()", 20000)
}

// Charge la fonction
window.onload = function(){
ChangerImage();
}
</SCRIPT>

Merci pour ton aide.

mkore

Le 19 mars 2012 à 14:47:23

Bonjour et merci pour ce code très pratique !
Je suis débutant et j'aimerais pouvoir ajouter un lien sur chaque image ?
Quelqu'un aurait-il une piste ?
Merci !