Afficher une image sur la même page en cliquant sur un lien [Résolu]

[phenix1988]

Bonsoir
s'il vous plaît est-ce que quelqu'un sait comment Afficher une image sur la même page en cliquant sur un lien en utilisant java script
j'ai cherché partout mais j'ai rien trouvé
merci d'avance

[Bovino]

Oui, moi... (entre autre...)

Maintenant, si tu pouvais en dire un peu plus
Quelle est la structure de ta page, où veux-tu afficher ton image etc...

[phenix1988]

j'ai un menu et je veux que à chaque fois que je clique sur un lien dans ce menu qu'une image s'affiche sur la même page sans me rediriger vers une autre
j'espere que c'est plus clair
merci

[NoSmoking]

il me semble qu'un simple lien est suffisant

Code html :

1
2
3
4
5
<ul>
  <li><a href="image_1.jpg">Lien #1</a></li>
  <li><a href="image_2.jpg">Lien #2</a></li>
  <li><a href="image_3.jpg">Lien #3</a></li>
</ul>

[Bovino]

Non, pas tout à fait, ton exemple va afficher l'image à la place de la page actuelle.
Ce serait plutôt un truc du genre

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
  <li><a href="image_1.jpg" onclick="affiche(this.href);return false;">Lien #1</a></li>
  <li><a href="image_2.jpg" onclick="affiche(this.href);return false;">Lien #2</a></li>
  <li><a href="image_3.jpg" onclick="affiche(this.href);return false;">Lien #3</a></li>
</ul>
<div>
<img alt="Image" src="image_par_defaut.jpg" />
</div>
<script type="text/javascript">
function affiche(lienImg){
document.getElementById('refImg').src = lienImg;
}
</script>

[NoSmoking]

effectivement j'ai pris cela au premier niveau, voir zéro même, mais vu sous cet angle je vois mieux l'intérêt de ce post!

[phenix1988]

Envoyé par Bovino

Non, pas tout à fait, ton exemple va afficher l'image à la place de la page actuelle.
Ce serait plutôt un truc du genre

Code :

merci pour ce code qui a l'air de bien marcher mais en le testant l'image apparaît toujours dans une nouvelle page
est-ce que vous avez une solution?
merci d'avance

[Loceka]

Qu'est-ce que tu appelles "une nouvelle page" ?

Parce que le script de Bovino charge l'image toujours au même endroit dans la même page sans recharger celle-ci (la page, pas l'image).

Bon ça le fait à condition que tu rajoutes l'ID à la balise image, mais sinon y'a pas de raison que ça recharge la page :

Code :

<img id="refImg" alt="Image" src="image_par_defaut.jpg" />

[phenix1988]

Merci Loceka et Bovino , ça marche