Afficher une image sur la même page en cliquant sur un lien

Version imprimable

10/03/2011, 23h45
phenix1988

Afficher une image sur la même page en cliquant sur un lien

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
11/03/2011, 08h09
Bovino

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

Maintenant, si tu pouvais en dire un peu plus :roll:
Quelle est la structure de ta page, où veux-tu afficher ton image etc...
11/03/2011, 12h03
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 :lol:
merci

il me semble qu'un simple lien est suffisant

Code:

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>

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>

11/03/2011, 14h33
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!

Citation:
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:

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>
merci pour ce code qui a l'air de bien marcher mais en le testant l'image apparaît toujours dans une nouvelle page :cry:
est-ce que vous avez une solution?
merci d'avance

11/03/2011, 15h30
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" />
11/03/2011, 15h37
phenix1988

Merci Loceka et Bovino , ça marche :ccool::ccool:
31/10/2019, 19h20
nono1975

affichage image et PDF dans la même page

Bonjour,

Je sais que c'est un vieux poste, mais le poste de @Bovino est top.
J'aimerai mélanger ce même script avec l'affichage d'une image mais également un pdf dans la même page.

est ce que c'est possible, merci d'avance