Remplacement d'image en JS : donnée source

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:

---

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

---

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:

---

<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 ?

Code:

---

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

---

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:

---

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

---

Code:

---

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

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:

---

<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....

Bonjour,

Citation:

---

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.

---

lors du retour de ta requête dans ce cas mets à jour ton HTML.

Si par là tu entends recharger les données de la table, ce n'est pas possible (sinon je ne poserai pas la question)

Pas forcément recharger les données de la table mais simplement mettre à jour l'élément ayant déclenché la requête .