Discussion :

[fabde64]

Bonjour,
Malgrè un petit niveau en JS, j'ai réussi à développer via la librairie js raphael un script permettant d'afficher dynamiquement une carte des départements de france, de changer la couleur du département survolé et lui attribuer un lien.
Cela fonctionne parfaitement sous chrome et FF, mais très mal sous IE.
La carte est bien créée, au survol de la souris le curseur change d'état et les départements de couleurs mais les liens ne fonctionnent pas et surtout le retour à la couleur d'origine via le onmouseout ne fonctionne pas. Donc a chaque zone survolée la couleur change définitivement.
Testé sur IE8 et IE9, même résultat.
Un âme charitable pourrai-t-elle m'aider svp ?
Merci d'avance.
Voici mon script (je copie le code pour un département seulement, pour ne pas surcharger le post, je pense que le problème vient de toute façon de la fonction..) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
window.onload = function() { 
var Paper = new Raphael(document.getElementById('canvas_france'), 600, 600); 
var dep = {};	
dep.Bouches_du_Rhone13 = Paper.path("M379.719,433.01l-5.469,3.125l-1.406,10.499l-5.781-0.813l-1.656,4.405l1.375,1.938l-6.344,3.875l-1.75,4.063l6.188,0.281l8.22,0.594l1.563,1.563h-2.938l-1.938,3.313l8.375,1.75l6.656-1.155l-3.531-3.345l2.344-1.938l3.72,1.563l1.75,3.72l11.155,0.188l2.906-1.188l0.594,1.78l-3.125,2.72l4.313,0.188l-0.781,1.969l-1.188,1.375h9.563l4.688,1.563l0.469,0.625l0.188-3.875l1.406-1.594l1.781-1.063l-0.188-1.063l-1.406-1.406h-1.406l-0.906-1.063l1.594-1.438v-0.531l-1.75-0.875v-1.406l3.875,0.188l0.906-0.719l-3.375-3.188l0.188-3.719l-2.125-1.75l1.75-3.531l4.25-2.844l-3.188-2.124l-2.281,1.78l-5.313,1.219l-4.25-0.531l-7.594-3.154l-4.594,0.155l-3.875-1.75l-1.438-1.969l-3-3.344l-7.063-3L379.719,433.01z").tooltip(Paper.rect(0,0,20,30)).attr({fill: "#007d40",stroke: "#666",title:"Bouches du Rhone",href:"http://www.mvpro.fr/LCE/?page_id=219"}); 
var current = null; 
for (var nom in dep) { 
dep[nom].color = Raphael.getColor(); 
(function (st, nom) { 
st[0].style.cursor = "pointer"; 
st[0].onmouseover = function () { 
current = nom;	
current && dep[current].animate({fill: "#007d40", stroke: "#666"}, 500); 
st.animate({fill: "#EEE", stroke: "#ccc"}, 500); 
st.toFront(); 
Paper.safari(); 
}; 
st[0].onmouseout = function () { 
st.animate({fill: "#007d40", stroke: "#666"}, 500); 
st.toFront(); 
Paper.safari(); 
}; 
if (nom == "nsw") { 
st[0].onmouseover(); 
} 
})(dep[nom], nom); 
}

[headmax]

Pas d'erreur JS?
Si pas d'erreur et lien non cliquable, sa sent les erreurs css, histoire de z-index, sur ton lien, ou l'utilisation position:absolute, à tester dans ce sens avant d'incriminé js, me semble raisonnable quelques tests dans ce sens te fera gagner du temps, de plus sans librairie ni sans code source + ou - complet pour le module en question, il sera difficile de te répondre objectivement.

Bonne chance et bonne soirée

[fabde64]

Je me suis orienté vers un problème de JS parceque si le css était en cause le onmouseover ne fonctionnerai pas non plus, non ?
En l'occurence, le script marche très bien sous FF et Chrome et il ne fonctionne qu'à moitié sous IE..
De plus, au survol des zones les liens apparaissent dans l'infobulle "ALT" mais ne sont pas cliquables.
Ma carte de france est appelée dans une div de base qui a pour seul attribut CSS "border" et width".
Mes fichiers JS utilisés :

http://www.mvpro.fr/LCE/wp-content/t.../js/raphael.js
http://www.mvpro.fr/LCE/wp-content/t...n/js/script.js