SRC variable / remplacable / "switchable" ?

babafig Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour à tous !

Ma question va peut-être sembler simple... ou pas..

Je cherche a savoir si il y a un moyen simple de remplacer la source à l'intérieure d'une balise <img> en fonction d'un lien sur lequel on aurait cliqué au sein de la même page...

En gros avoir peut-etre quelque chose dans le genre :

Avoir ma balise image avec un source de base
<img src"VARIABLE1/2/3"/>

Avoir mes lien avec des sortes de variable
<a href="VARIABLE1">image 1</a>
<a href="VARIABLE2">image 2</a>
<a href="VARIABLE3">image 3</a>

Puis attribuer des sources aux différentes variable...
VARIABLE 1 = src="image1.jpg"
VARIABLE 2 = src="image2.jpg"
VARIABLE 3 = src="image3.jpg"

J'aimerai si possible éviter le PHP...

Merci d'avance de vos réponses...

Ps : Soyez indulgent avec mon explication ;)



1 réponse

avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
C'est facilement faisable avec du JS.

Pour tes liens, indique l'url de l'image dans le href. Au clic, on appele la fonction afficher(), à laquelle on passe l'url de l'image (this = le lien cliqué)
<a href="image1.png" onclick="afficher(this.href); return false;">Image 1</a>
<a href="image2.png" onclick="afficher(this.href); return false;">Image 2</a>
...

Sur la balise de l'image, on ajoute un id afin d'y accèder simplement en JS :
<img src="pardefaut.png" alt="" id="image" />
Et la fonction JS (à mettre dans le head) :
<script type="text/javascript">
function afficher(url) {
    document.getElementById('image').src = url;
}
</script>
0