Discussion :

[franc3]

Bonjour,

J'ai un problème avec le chargment d'une image en javascript :

sur ma page, j'ai une image affichée, et je voudrais qu'elle change lorsqu'on clique sur un lien.

J'ai donc fait une fonction pour modifier l'image :

Code :

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

1
2
3
4
function changeImage(url){
document.getElementById("id_de_mon_image").src=url;
}

lorsque j'affiche ma page, la première photo s'affiche normalement, quand je clique sur le lien qui appelle la fonction changeImage(), la première photo disparait, mais la deuxième ne s'affiche pas. Par contre, si je fait un clic droit à l'emplacement de la photo puis "afficher l'image" (sous IE), là la photo apparait correctement.

J'ai essaye de charger du texte à la place de la photo (une div et innerHTML) et la tout se passe sans problèmes, donc je ne comprends pas d'ou peut venir ce problème.

Si quelqu'un à une idée, elle sera la bienvenue,

merci beaucoup

[franc3]

Je viens de faire le test sous Firefox, et le chargement de la nouvelle image se fait sans problemes, donc a priori un beug d'IE. Est ce que quelqu'un a déjà entendu parler de ce beug, et si oui y a t il une solution??

Merci

[masu]

IE a effectivement un bug avec getElementById
http://www.developpez.net/forums/sho...d.php?t=135604
mais il ne se produit que si tu as 2 elements avec le meme id dans ta page ou un element avec un name identique a l'id que tu cherche.

je suis pas sure que ca soit ton cas.
peu tu donner le HTML ou un lien ou on peu voir le probleme ?

[franc3]

Non mon probleme ne vient pas de ce beug là, le problème n'est pas de trouver l'element, mais seulement de la nouvelle image qui apparait.

J'ai essaye une autre solution :

Mon HTML : (généré par PHP mais ça ne change rien) :

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
24
 
 
 
 
<a href='javascript:;' onclick='changeImageCarteMeteo("<a href="http://www2.wetter3.de/Fax/bracknell+00.gif&quot;)&#39;" target="_blank">http://www2.wetter3.de/Fax/bracknell+00.gif")'</a>><div style="margin-left:40px">Analyse des fronts +00
 
 
</div></a>
 
 
 
<a href='javascript:;' onclick='changeImageCarteMeteo("<a href="http://www2.wetter3.de/Fax/bracknell+24.gif&quot;)&#39;" target="_blank">http://www2.wetter3.de/Fax/bracknell+24.gif")'</a>><div style="margin-left:40px">Analyse des fronts +24
 
 
</div></a>
 
 
 
<div class='ELListe' id='divImageCarteMeteo' ><div style="margin-left:40px"><a href='http://www2.wetter3.de/Fax/bracknell+00.gif' target='_blank'>
<img name='imagesCarteMeteo' id='imagesCarteMeteo' src='http://www2.wetter3.de/Fax/bracknell+00.gif' class='imageCarteMeteo'>
</a>
 
 
</div></div>

et mon code JS :

Code :

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

1
2
3
4
5
6
function changeImageCarteMeteo(carte){
 

document.getElementById(
"imagesCarteMeteo").src=carte;
}

j'ai aussi essaye , mais sans plus de résultats :

Code :

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

1
2
3
4
5
6
7
8
 

function changeImageCarteMeteo(carte){
var
image = new Image();
image.src=carte;
document.getElementById("imagesCarteMeteo").src=image.src;

}

et même

Code :

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

1
2
3
4
5
6
7
8
 

function changeImageCarteMeteo(carte){
document.getElementById("divImageCarteMeteo").innerHTML="<a href=\""+carte+"\" target=\"_blank\">"+
"<img id=\"imagesCarteMeteo\" src=\""+carte+"\" width=\"370px\" border=\"0\">"+
"</a>";
}

Dans le dernier cas, le lien de l'image change bien, la première image n'est plus affichée, mais la deuxième n'apparait toujours pas, sauf si je clic droit puis "afficher images"

[masu]

j'y avait pas persé de suite a celle la.
met un herf="#" dans tes lien et inactive leur action par le retur false apres l'apel de ta fonction

Code :

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

1
2
3
<a href="#" onclick="changeImageCarteMeteo('http://www2.wetter3.de/Fax/bracknell+00.gif'); return false;">
Analyse des fronts +00
</a>

[denisC]

lorsque j'affiche ma page, la première photo s'affiche normalement, quand je clique sur le lien qui appelle la fonction changeImage(), la première photo disparait, mais la deuxième ne s'affiche pas. Par contre, si je fait un clic droit à l'emplacement de la photo puis "afficher l'image" (sous IE), là la photo apparait correctement.

Il vaut beaucoup mieux précharger les images avec IE. C'est dans quel cadre que tu souhaites afficher cette image? Tu as un ensemble fini d'images? C'est du dynamique?

[franc3]

Super ça marche, merci beaucoup Masu

Si vous voulez voir le site, voici l'adresse (encore en developpement, beaucoup de fonctions ne marchent pas) :

http://www.sudisteam.com/start/

C'etait pour le module "cartes meteo" colonne de gauche

merci encore à tous