title: Combining Raphael and jQuery to achieve browser compatibility
body: <p>Having discovered that IE does not handle javascript <code>onmouseout</code>, I'm determined to use jQuery instead so the cross-browser compatibility would be taken care of automatically. I am making an area defined by an svg path light up when the mouse hovers over it, and I adapted the code provided on the Raphael website from the <a href="http://raphaeljs.com/australia.html" rel="nofollow noreferrer">Australia example</a>.</p>
  
  <p>In this code, each state of Australia is defined by a Raphael path, for example Tasmania:</p>
  
  <pre><code> aus.tas = R.path("...").attr(attr);
  </code></pre>
  
  <p>This path ('st') is then passed to the function: </p>
  
  <pre><code>st[0].onmouseover = function () {
      ...
  };
  </code></pre>
  
  <p>Contrary to what I would have expected, the code is <code>st[0].onmouseover</code> as opposed to merely <code>st.onmouseover</code>. Thus, the path must actually be an array, and <code>st[0]</code>, whatever that is, is the thing that is hovered over.</p>
  
  <p>In order to replace <code>onmouseover</code> with the jQuery equivalent (which I believe is <code>.mouseout()</code>), I need to assign a class to <code>st[0]</code> so I can refer to it with jQuery. My question is, how do I do that? If the code was <code>st.onmouseover</code> it would be straightforward, but why is the path (<code>st</code>) an array? What exactly is <code>st[0]</code>? And how the heck do I get to it?</p>