How to get a second request to index from an array to start at the beginning with jQuery?
<p>I have this code to identify two different image map shape attributes. What I'm trying (unsuccessfully) to do is get the two different shapes to index the title attributes from the beginning of the array.</p>

<p>The code:</p>

<pre><code> window.slideDetails = [ 

        //Slide1    
        "C1BP7: user information",
        "FJAD7: user information",
        "FFAD7: user information",
        //Slide2
        "C0AE7: user information",
        "C7AZ7: user information",
        "FJAE7: user information",
        //Slide3
        "C1AW7: user information",
        "FJAP7: user information",
        "FFAD7: user information"

        ]; 
        $('area').each(function(index) {
            var shape=$(this).attr('shape');
              if (shape == 'rect') {
                    $(this).attr("title", window.slideDetails[index]);
              }

              else if (shape == 'poly') {
                    $(this).attr("title", window.slideDetails[index]);
              }

     });
</code></pre>

<p>It's indexing them in order So the first three 'poly' attributes get the first three in the array, then the next three attributes which are 'rect' get 4-6 and so on. I don't know enough about index &amp; arrays, and I'm pretty sure I'm using the index incorrectly. </p>

<p>HTML</p>

<pre><code>&lt;img src="/images/testImage.jpg" width="1000" height="610" border="0" usemap="#Map1" /&gt;
&lt;map name="Map1" id="Map1"&gt;
  &lt;area shape="poly" coords="280,140,296,201,308,202,328,183,324,141,340,126,360,134,359,254,332,252,333,214,324,274,327,407,202,392,201,330,223,331,219,291,231,243,210,238,232,131,252,118" href="test1.htm" /&gt;
  &lt;area shape="poly" coords="277,113,296,199,308,197,326,183,323,115,316,138,293,138" href="test2.htm" /&gt;
  &lt;area shape="poly" coords="212,507,218,571,236,543,238,575,261,587,270,586,262,539,245,537,237,544,234,537,236,520,228,496,214,497" href="test3.htm" /&gt;
  &lt;area shape="rect" coords="609,235,834,335" href="test1.htm" /&gt;
  &lt;area shape="rect" coords="649,546,807,565" href="test2.htm" /&gt;
  &lt;area shape="rect" coords="670,566,781,582" href="test3.htm" /&gt;
&lt;/map&gt;
</code></pre>

<p>The rect and poly shapes are different parts of the image, but the first of each go the same link etc.</p>
