jQueryを使用して個々のマップID領域のタイトル属性を正しくターゲットする方法

Question

1ページに複数のイメージマップがあり、Google Analyticsのタイトル属性を供給するように配列を設定する必要があります。

これは機能しますが、正しい方法ではないようです。私はjQueryを学んでいて、間違いやコードを書く正しい方法から学びたいと思っています。

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

するforループを使用し、map1arrayを変更：

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

ヒント：0から3（両端を含む）の数値を繰り返します。