title: Events work in Firefox/Chrome but fail in IE
body: <p>I've just built an SVG map of New Zealand for use with the excellent javascript library <a href="http://raphaeljs.com" rel="nofollow noreferrer">Raphael</a>, but unfortunately have stumbled upon what I can only imagine is a bug or syntactic variation in IE's javascript interpreter.</p>
  
  <p>In Firefox and other browsers the onlick and onmouseover events work perfectly - however they do not fire in IE (tested in IE 7). Unfortunately there is no javascript error to help me debug this, so I can only assume IE handles these events in some fundamentally different way.</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      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 &amp;&amp; nz[current].animate({ fill: "#3f3f40", stroke: "#666" }, 500) &amp;&amp; (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);
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Many thanks :)</p>