Changer d'image au click et une seule image sélectionnée

Bonjour tout le monde,

J'ai un un petit soucis. j'ai un arbre qui contient plusieurs lignes. Sur chaque ligne j'ai un icône "I Gris". J'aimerais que quand je click dessus cette icone devienne "I Bleu" et qu'il ne soit possible de n'avoir qu'un seul "I Bleu" et tout les autres en "I Gris".

j'ai donc fais ça sur mes images :

Code:

---

<img class="metadata" src="images/tree/iconeInfoGris.png" onclick="changeImage(this)" width=13 height=13></img>

---

Et ma fonction changeImage(image)

Code:

---

image.src = (image.src=="./images/tree/iconeInfoBleu.png" ) ? "./images/tree/iconeInfoGris.png" : "./images/tree/iconeInfoBleu.png";

---

Mon problème est que le chemin source n'est pas bon il faudrait que je mette un truc du genre : http://localhost:8080/......../image...neInfoBleu.png pour que ça marche correctement.

Et deuxième problème comment faire pour que je n'ai qu'un seul "I Bleu" à la fois et tout les autres en "I Gris".

Merci

mets une seule image en collant tes deux images l'une au dessous de l'autre
ensuite soit tu joues du background-image et de son position
ou alors joues du clip sur l'image
comme ça l'image est déja chargée

Code:

---

image.src = (image.src=="./images/tree/iconeInfoBleu.png" ) ? "./images/tree/iconeInfoGris.png" : "./images/tree/iconeInfoBleu.png";

---

Pour faire simple tu n'aurais pas plus vite fait de regarder si ta source comprend les mots "Bleu" ou "Gris" ?

ERE

a mon avis plus simple de jouer sur le clipTop ou background position éventuellement avec un flag

Citation:

---

Envoyé par SpaceFrog

mets une seule image en collant tes deux images l'une au dessous de l'autre
ensuite soit tu joues du background-image et de son position
ou alors joues du clip sur l'image
comme ça l'image est déja chargée

---

Oui je vois un peu le système mais je n'ai jamais vraiment utilisé. Si t'as un petit exemple je suis preneur :)

Citation:

---

Code:

---

image.src = (image.src=="./images/tree/iconeInfoBleu.png" ) ? "./images/tree/iconeInfoGris.png" : "./images/tree/iconeInfoBleu.png";

---

Pour faire simple tu n'aurais pas plus vite fait de regarder si ta source comprend les mots "Bleu" ou "Gris" ?

ERE

---

Ca pourrait être une solution en effet mais comme ce produit est fait pour évolué je ne trouve pas ça forcément très pratique.

Et au niveau de la sélection d'une seule image vous avez une petite idée ?
J'utilise jQuery si jamais ça peut permettre de trouver une solution plus simplement.

Merci

Code:

---

<div style="height:50px; width:50px; background-image:url('onetwo.png'); background-position:top;" src="onetwo.png" onmouseover="this.style.backgroundPosition='bottom';" onmouseout="this.style.backgroundPosition='top';" />

---

le div fait 50px x 50px
et l'image le double verticalement

au depart on ne vois que l amoitié du haut
au survol on ne voit que la moitié du bas ..

Citation:

---

Envoyé par SpaceFrog

Code:

---

<div style="height:50px; width:50px; background-image:url('onetwo.png'); background-position:top;" src="onetwo.png" onmouseover="this.style.backgroundPosition='bottom';" onmouseout="this.style.backgroundPosition='top';" />

---

le div fait 50px x 50px
et l'image le double verticalement

au depart on ne vois que l amoitié du haut
au survol on ne voit que la moitié du bas ..

---

Je pense qu'on s'est mal compris :)
En fait je voudrai faire comme un système de bouton à cocher. En gros j'ai une image, et quand je clique dessus j'ai une autre image mais qui reste une fois ma souris enlevée. Et si je reclique je reviens sur l'image initiale.

Je me suis mieux exprimé cette fois-ci ?

:roll::roll::roll:
Tentative d'excitation de neurones échouée ...
:(
je sais parfaitement ce que tu as demandé ...
mais je suis partisan du fait d'apprendre à pecher et pas de nourrir bêtement.

c'est exactement la même chose suffit passer par l'evenement onclick.
Tester éventuellement un flag (coché ou non coché) pour faire exactement la même opération sur la position du background...

Ok j'ai compris et désolé pour mes neurones ;)
J'ai donc réussi à mettre ta solution en place avec le mouseout et mouseover et donc en effet ça marche impeccable pour le onclick mais oui il faut un flag pour savoir si l'image est coché ou non. Mais je ne vois pas trop le principe. Comment savoir si l'image est cochée ou non ?

Dernière question : Comment je peux faire pour dès que je click sur une des images je réinitialise toutes les autres en mode "décochées" ?


Merci beaucoup, je continue à chercher de mon coté

su rle onclick tu boucles sur la collection des images pour modifier leur background position

D'acc c'est bien ce dont j'avais peur. Car mes img sont dans des div qui sont dans des tableaux et ainsi de suite donc je risque peut-être de galérer un peu mais bon je vais essayer. Sinon j'utilise JQuery y a peut-être un moyen plus simple ?

Et juste par curiosité comment j'aurai du faire si sur le onclick je voulais l'image et quand je recliquais je voulais que l'autre image réapparaisse ?

Merci

En fait avec JQuery c'est vraiment tout simple. Sur toutes mes images j'ai indiqué la même classe. Et sur le onclick de chaque image j'ai mis une fonction qui fait ceci :

Code:

---

1 2 3 4 5 6

function interrogeableOuNon(choix) { //Sélectionne toutes mes classes et change le backgroundPosition à bottom $(".interrogeable").css("backgroundPosition","bottom"); //Met le backgroundPosition à top pour l'image sur laquelle je viens de cliquer choix.style.backgroundPosition = "top"; }

---

Code:

---

+ '<div id=interrogeable'+ layerLegende +' class="interrogeable" style="height:12px; width:12px; background-image:url(images/tree/iconeInfo.png); background-position:bottom;" src="images/tree/iconeInfo.png" onclick=interrogeableOuNon(this);></div>'

---

Par contre je suis un peu ennuyé car vu que c'est une DIV ca me saute une ligne et ca créé un décalage partout.
Comment puis-je faire svp ?

Merci


EDIT : Suffit de remplacer DIV par image et ça roule tout seul mais bon je ne comprend pas trop defois mdr.