Question

I have multiple image maps on one page, and it’s a requirement to setup arrays to feed their title attribute for Google Analytics.

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.

HTML:

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

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

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

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

jQuery:

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

​

Answer 1

Use a for loop, and change map1array to be:

var map1array = [ "test a0",
                  "test b0",
                  "test c0",
                  "test d0"
                 ];

Hint: iterate over a number from 0 to 3 (inclusive).