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.