Modification d'un div contenant du texte à l'aide de JS

Version imprimable

Bonjour,

J'ai trouvé un morceau de code permettant de rafraîchir l'image contenue dans un div toutes les x secondes.
J'aimerais l'adapter pour qu'un autre div contenant du texte se rafraîchisse aussi (selon le même index x).

J'ai franchement du mal avec le javascript et je n'arrive pas à savoir comment accéder au contenu du div id "texte", le paramètre est-il "src" ou" content" ?

Merci à tous pour votre précieuse aide !

-----------------------------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html><head>
<script>
function changeImage()
{
    var img = document.getElementById("imageprofile");
    img.src = images[x];
    x++;
 
    if(x >= images.length){
        x = 0;
    } 
 
    fadeImg(img, 600, true);
    setTimeout("changeImage()", 10000);
}
 
function fadeImg(el, val, fade){
    if(fade === true){
        val--;
    }else{
        val ++;
    }
 
    if(val > 0 && val < 100){
       el.style.opacity = val / 100;
        setTimeout(function(){fadeImg(el, val, fade);}, 10);
    }
}
 
var images = [],
x = 0;
 
images[0] = "/img/profile/1.jpg";
textes[0] = "texte image 1";
images[1] = "/img/profile/2.jpg";
textes[2] = "texte image 2";
images[3] = "/img/profile/3.jpg";
textes[3] = "texte image 3";
setTimeout("changeImage()", 10000);
</script>
</head><body>
<img id="imageprofile" src="">
<div id="texte">ici le texte à rafraîchir selon le même index x (lié à mon image)</div>
</body></html>

23/01/2013, 12h19
bajoe

J'ai essayé de rajouter cette ligne dans changeImage() sous img.src = images[x]; mais ça ne marche toujours pas...

Code:

document.getElementById("texte").innerHTML = textes[x];

Tu as vérifié ce que contiennes tes variables textes et images ? Le problème vient principalement de là.

textes n'est pas déclaré.
En faisant ce que tu fais, tu as créé un truc hybride du genre :
Code:

1 2 ["/img/profile/1.jpg", "/img/profile/2.jpg", 3: "/img/profile/3.jpg"] ["texte image 1", 2: "texte image 2", 3: "texte image 3"]
Pour ajouter un élément à un tableau, utiliser push.
Code:

1 2 3 4 5 6 7 8 9 10 var images = [], textes = [], x = 0; images.push("/img/profile/1.jpg"); textes.push("texte image 1"); images.push("/img/profile/2.jpg"); textes.push("texte image 2"); images.push("/img/profile/3.jpg"); textes.push("texte image 3");
ou directement :
Code:

1 2 3 var images = ["/img/profile/1.jpg", "/img/profile/2.jpg", "/img/profile/3.jpg"], textes = ["texte image 1", "texte image 2", "texte image 3"], x = 0;
Tu n'appelles jamais la fonction changeImage(). Il faut un moyen pour la déclencher (onload de la page par exemple).

Enfin, pour la fonction setTimeout, il faut l'utiliser comme cela :

Code:

setTimeout(changeImage, 10000);