Remplacement d'image en JS : donnée source

**eric41** · 29/04/2016, 21h41

Bonjour,
J'ai fait un script qui récupère des informations dans une table mysql. Dans le tableau HTML qui organise les données, j'ai inséré une image qui change selon la valeur d'un champ. J'ai fait une fonction Ajax qui permet de changer la valeur de ce champ dans la table, et de changer l'image en conséquence. Cela fonctionne. Le problème est de changer la valeur d'origine. Voici le code du lien lançant la fonction.

Code :

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

<a href="javascript:favori(20, 1);">[image]</a>

"1" est la donnée qui conditionne l'image à afficher. Voici le code que j'utilise pour changer l'image.

Code :

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

document.getElementById('favori_img_'+id).src = 'favori_1.png';

Et le code HTML de l'image (le _20 est la donnée qui change pour chaque enregistrement extrait) :

Code :

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

<img src="favori_1.png" id="favori_img_20" style="height: 16px;width: 16px;border: 0;" />

Comment changer le second paramètre de la fonction favori() pour que l'action change lors d'un clic ?

**sekaijin** · 01/05/2016, 11h48

Code html :

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

<a href="#" onclick="favori(20, 1); return false;"><img src="favori_1.png" id="favori_img_20" style="height: 16px;width: 16px;border: 0;" /></a>

Code :

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

1
2
3
function favori(id, index) {
  document.getElementById('favori_img_'+id).src = 'favori_'+index+'.png';
}

mais je ne suis pas sur d'avoir compris ce que tu voulais faire

Les éléments du DOM sont des objet il n'est donc pas nécessaire d'avoir des id partout pour trouver les bon éléments. dans le onclick tu passe en paramètre this qui représent l'élément Ahref lui même.
donc dans la fonction tu n'a pas besoin d'indice l'image est le premier élément img contenu dans l'élément ahref.

Code html :

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

<a href="#" onclick="favori(this, 1); return false;"><img src="favori_1.png" style="height: 16px;width: 16px;border: 0;" /></a>

Code :

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

1
2
3
function favori(el, index) {
  el.getElementsByTagName('img')[0].src = 'favori_'+index+'.png';
}

Enfin pour la syntaxe du ahref avec javascript:favori() est à proscrire. c'est une syntaxe hérité de la préhistoire (qui n'aurais jamais du exister) il faut utiliser onclick qui est dédié à cet usage.

le fonctionnement de onclick est le suivant
le texte présent dans le code html onclick="" est compilé pour faire une fonction

lorsque l'utilisateur clique sur le lien la fonction est appelée.
si la fonction retourne false l'événement "clic" se termine
si la fonction retourne true l'événement se propage et le lien "href" est activé.

ce qui explique le return false dans le code.
A+JYT

**eric41** · 01/05/2016, 12h12

Merci pour ton retour. C'est juste un petit script pour moi, peu important, doinc peu exigeant sur le code (c'est plus un entraînement).

Le lien est généré d'après les données d'une table, notamment le 1.

Code :

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

<a href="#" onclick="favori(this, 1); return false;"><img src="favori_1.png" style="height: 16px;width: 16px;border: 0;" /></a>

Quand je clique sur l'image, ça change l'image, mais il faudrait que je remplace le 1 par un autre chiffre pour que l'action exécutée par le clic change aussi (sachant que la donnée de la table est changée).

Pour schématiser : si ma donnée en table est 1, j'affiche une citrouille, si c'est 2, j'ai une fleur. Je clique sur la citrouille, le 1 est remplacé en table apr un 2 et je remplace la citrouille par une fleur. Mais si je reclique, il considère toujours que j'ai une citrouille et veut la changer en fleur, car dans le code HTMLL, j'ai toujours mon 1. Mais peut être que la démarche n'est pas bonne....