Я только что построил карту SVG Новой Зеландии для использования с превосходной библиотекой javascript Raphael , но, к сожалению, наткнулся на то, что я могу себе представить, это ошибка или синтаксическая вариация в интерпретаторе JavaScript JavaScript.
В Firefox и других браузерах события onlick и onmouseover работают отлично - однако они не запускаются в IE (протестировано в IE 7). К сожалению, нет никакой ошибки javascript, которая помогла бы мне отладить это, поэтому я могу только предположить, что IE обрабатывает эти события каким-то принципиально другим способом.
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var R = Raphael("paper", 450, 600);
var attr = {
fill: "#3f3f40",
stroke: "#666",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var nz = {};
nz.northland = R.path(attr, "M 193.34222,3.7847503 C 194.65463");
// SVG data stripped for sake of brevity
var current = null;
for (var region in nz) {
nz[region].color = Raphael.getColor();
(function(rg, region) {
rg[0].style.cursor = "pointer";
rg[0].onmouseover = function() {
current && nz[current].animate({ fill: "#3f3f40", stroke: "#666" }, 500) && (document.getElementById(current).style.display = "");
rg.animate({ fill: rg.color, stroke: "#ccc" }, 500);
rg.toFront();
R.safari();
document.getElementById(region).style.display = "block";
current = region;
};
rg[0].onclick = function() {
alert("IE never gets this far.");
//window.location.href = "my-page.aspx?District=" + region;
};
rg[0].onmouseout = function() {
rg.animate({ fill: "#3f3f40", stroke: "#666" }, 500);
};
if (region == "northland") {
rg[0].onmouseover();
}
})(nz[region], region);
}
};
</script>
Большое спасибо:)