How to correctly target individual map ID area title attribute using jQuery
<p>I have multiple image maps on one page, and it's a requirement to setup arrays to feed their title attribute for Google Analytics.</p>

<p>Although this works, it doesn't seem the right way to do it. I'm learning jQuery and hoping to learn from my mistakes and the correct way to write the code.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;img src="map1.jpg" width="100" height="10" border="0" usemap="#Map1" /&gt;
&lt;map name="Map1" id="Map1"&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testa.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/&gt;
&lt;/map&gt;

&lt;img src="map2.jpg" width="100" height="10" border="0" usemap="#Map2" /&gt;
&lt;map name="Map2" id="Map2"&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testa.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/&gt;
&lt;/map&gt;

&lt;img src="map3.jpg" width="100" height="10" border="0" usemap="#Map3" /&gt;
&lt;map name="Map3" id="Map3"&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testa.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/&gt;
&lt;/map&gt;

&lt;img src="map4.jpg" width="100" height="10" border="0" usemap="#Map4" /&gt;
&lt;map name="Map4" id="Map4"&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testa.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testb.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testc.htm" class="fancybox" rel="iframe"/&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="testd.htm" class="fancybox" rel="iframe"/&gt;
&lt;/map&gt;
</code></pre>

<p><strong>jQuery:</strong></p>

<pre><code>&gt; var map1array = [ "test a",
&gt;                   "test b",
&gt;                   "test c",
&gt;                   "test d"
&gt;                  ]; 
&gt; 
&gt; var map2array = [ "test a2",
&gt;                   "test b2",
&gt;                   "test c2",
&gt;                   "test d2"
&gt;                 ]; 
&gt; 
&gt; var map3array = [ "test a3",
&gt;                   "test b3",
&gt;                   "test c3",
&gt;                   "test d3"
&gt;                 ]; 
&gt; 
&gt; var map4array = [ "test a4",
&gt;                   "test b4",
&gt;                   "test c4",
&gt;                   "test d4"
&gt;                 ]; 
    $('#Map1 &gt; area').click(function(e) {$(this).attr('title', map1array[$(this).index()]);});
    $('#Map2 &gt; area').click(function(e) {$(this).attr('title', map2array[$(this).index()]);});    
    $('#Map3 &gt; area').click(function(e) {$(this).attr('title', map3array[$(this).index()]);});
    $('#Map4 &gt; area').click(function(e) {$(this).attr('title', map4array[$(this).index()]);});  ​
</code></pre>

<p>​</p>
