Discussion :

[Skyth]

Bonjour,
Voilà mon code javascript que j'ai essayé d'adapter à mon site php.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function changeLogo() {
    if(document.getElementById('moteur').value ==1){
        document.getElementById('logo').src = "img/img_ogre.png";
    }
    if(document.getElementById('moteur').value ==2){
        document.getElementById('logo').src = "img/img_goule.png";
    }
    if(document.getElementById('moteur').value ==3){
        document.getElementById('logo').src = "img/img_garm.png";
    }
}
</script>

Code HTML :

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

1
2
3
4
5
6
7
<select id="moteur" onchange="changeLogo();">
  <option value="1">Google</option>
  <option value="2">Wlink</option>
  <option value="3">Wiki</option>
</select>
 
<img id="logo" name="logo" width="160" height="200">

Le problème c'est que les valeurs de "moteur" est une clef SQL par conséquent je reçois un id à la place des valeurs 1,2,3, comme dans le premier code.
Il me faut attraper la clef par un identifiant numérique la mettre dans les IF javascript et afficher l'image correspondante.

exemple:
id: 163 img: img_gorgones.png
id: 137 img: img_cyclope.png

J'optiens la clef en PHP sans soucis. Mais il me faut afficher l'image correspondante.
Je pense qu'en écrivant en JQuery j'y arriverais sans problème.
Et comme je n'y connais rien, je vous demande de m'aider pour le code JQuery adapté.
Merci j'attends vos réponses.

[NoSmoking]

Bonjour,

Je pense qu'en écrivant en JQuery j'y arriverais sans problème.

alors pourquoi poser la question

Plus sérieusement, si j'ai bien tout compris, il te faut écrire ton <select> avec des <option> ayant comme value l'url de tes images

Code html :

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

1
2
3
4
5
<select id="moteur" onchange="changeLogo(this);">
  <option value="img/img_ogre.png">Google</option>
  <option value="img/img_goule.png">Wlink</option>
  <option value="img/img_garm.png">Wiki</option>
</select>

ta fonction devient dans ce cas

Code :

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

1
2
3
4
function changeLogo(obj) {
  const urlImg = obj.value || "";
  document.getElementById('logo').src = urlImg;
}

nota : on passe this à la fonction pour récupérer directement le <select>.

Pas besoin de jQuery donc et quoiqu'il arrive ne pas comprendre ce que l'on fait en JavaScript n'aide pas à le faire avec l'écriture en jQuery.