Home/ Questions/Q 7714361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:06:29+00:00

I have this code to identify two different image map shape attributes. What I’m

  • 0

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.

The 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]);
              }

     });

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 & arrays, and I’m pretty sure I’m using the index incorrectly.

HTML

<img src="/images/testImage.jpg" width="1000" height="610" border="0" usemap="#Map1" />
<map name="Map1" id="Map1">
  <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" />
  <area shape="poly" coords="277,113,296,199,308,197,326,183,323,115,316,138,293,138" href="test2.htm" />
  <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" />
  <area shape="rect" coords="609,235,834,335" href="test1.htm" />
  <area shape="rect" coords="649,546,807,565" href="test2.htm" />
  <area shape="rect" coords="670,566,781,582" href="test3.htm" />
</map>

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you’re doing a loop that assigns an index-per-area, rather than an index-per-shape.

    Instead you can use two loops (so the index gets reset on the different types of shape), and include the shape attribute as part of your selector:

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

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

    See this fiddle: http://jsfiddle.net/mKc6T/

    • 0