Raphael: Comment ajouter une action sur le clic qui change de couleur?

Basé sur la démonstration de Raphael: http://raphaeljs.com/australia.html J'ai créé des objets qui changent de couleur. Mais j'ai besoin d'ajouter une action. Onclick changera de couleur (en orange). Et puis il restera orange jusqu'à ce qu'il soit à nouveau cliqué.

Je veux que ces objets montrent l'état sélectionné (en ayant une couleur différente). Si vous cliquez sur l'objet, il change de couleur. Si vous cliquez à nouveau, cela revient à la normale. Et encore Si vous cliquez dessus, vous changez de couleur et les émissions sélectionnées.

Cela fait partie de mon code:

var current = null; for (var state in bodyParts) { bodyParts[state].color = Raphael.getColor(); (function (st, state) { st[0].style.cursor = "pointer"; st[0].onmouseover = function () { current && bodyParts[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = ""); st.animate({ fill: st.color, stroke: "#ccc" }, 500); st.toFront(); R.safari(); document.getElementById(state).style.display = "block"; current = state; }; st[0].onmouseout = function () { st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500); st.toFront(); R.safari(); }; st[0].onclick = function () { st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500); st.toFront(); R.safari(); }; })(bodyParts[state], state); 

Onclic, il change de couleur mais après avoir retiré la souris de l'objet, il revient à la normale et n'est pas sélectionné. Comment puis-je ajouter ce comportement «sélectionné» à ce code?

Ajoutez un autre paramètre qui conserve l'état sélectionné.

  st[0].state = 0; 

Modifiez ceci:

  st[0].onclick = function () { st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500); st.toFront(); R.safari(); }; 

Comme ça:

  st[0].onclick = function () { st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500); st.toFront(); if (this.state == 0) this.state = 1; else this.state = 0; R.safari(); }; 

Et ça:

  st[0].onmouseout = function () { st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500); st.toFront(); R.safari(); }; 

Comme ça:

  st[0].onmouseout = function () { if (this.state == 0) st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500); else st.animate({ fill: "#f00", stroke: "#E0B6B2" }, 500); st.toFront(); R.safari(); }; 

Bien sûr, avec vos couleurs … mais c'est l'idée principale.