Question

I’m trying to use the .each() function of JQuery on a body load to assign functionality to different areas in an image-map. It works fine in MSIE but fails completely in any other browser. If I hardcode the javascript function and call it using:

href="javascript:cInfo(mapHeadG)"

as an attribute for each area it works in all browsers so I know it’s not the code itself. I am guessing it has to be the filter I’m using. Any suggestions would be helpful!

Here is the image map element:

<map id="mMap1" name="mMap1">
    <area coords="44, 13, 116, 14, 123, 21, 36, 21" 
          shape="poly" alt="" id="mapHeadG" class="mLink" />
    <area coords="37, 66, 113, 65, 117, 73, 34, 76" 
          shape="poly" alt="" id="mapNeckG" />
    <area coords="8, 83, 141, 79, 144, 88, 126, 97, 9, 96, 2, 92" 
          shape="poly" alt="" id="mapShoulderG" />
</map>

Here is the JQuery I use to assign the functionality:

    $(document).ready(function () {
        $('*[id*=map]:visible').each(function () {
            var sec = $(this).attr('id');
            alert(sec);
            $(this).hover(function () {
                //Do something here.
            }, function () {
                //Do something here.
            });
            $(this).click(function () {
                //Do something else here
            })
        });
    });

(The sec variable is just a test to see if I am getting any information, this fires in MSIE but not in the other browsers)

You will see the alert(sec) line in the javascript, this is how I know the function is working in MSIE but not in the others, well this and the fact that when I click the mapped areas in MSIE this works but fails in the others.

Like I said before, I am almost positive it has to do with the filter itself, but I can’t seem to find it. Thanks in advance for any help!

Answer 1

Thanks to both of you for your suggestions (including the one that disappeared), they actually helped me figure it out. It was the :visible that was stopping the other browsers. Using the following:

$('#Map1' area).each()

or in my case since I have more than one map

$(*[id*=mMap] area).each() 

allows the functionality to be assigned to each image map area.

Appreciate your tips, thanks again.