ImageMapster - show image map area on text link hover

Question

I have an image map with hover effects using ImageMapster.js... Next to the image is a list of text-links which refer to certain areas of the image map areas. Is it possible to highlight the image map area when I hover over the text-link?

e.g.:

<img src="map.png" usemap="#ch" style="width:100%;">
<map id="usa_image_map" name="usa>
<area href="http://ab.com" state="ab" shape="poly" coords="259,256,275,257,..."><area href="http://xy.com" state="xy" shape="poly" coords="332,421,329,416,...">
</map>
<div id="links">
<a href="http://ab.com">ab</a><a href="http://xy.com">xy</a>

score 1 · Accepted Answer · edited Mar 28 '13 at 10:52

Try this:

    $("a", "#links").hover(
      function () {
        var state = $( this ).text();
        $( 'area[state="' + state +'"]').mapster('select');

    });

This is an event which gets active when you hover the link list with the id="links". The var state holds the text of the hovered link, so when you hover <a href="ab.com">ab</a>, state is ab. With the selector $('area[state="' + state +'"]') you can find the area element of the map with the state attribute which equals the text of the hovered link. mapster('select') finally highlights the map area.

ImageMapster - show image map area on text link hover

1 Answers1