Home/ Questions/Q 5932613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:51:31+00:00

I have created an image map and i want to highlight maps areas on

  • 0

I have created an image map and i want to highlight maps areas on mouse over. To achieve this i wrote following code.

JS:

<script type="text/javascript">
        $(document).ready(function(){
            $('#Map area').hover(function(){
                alert('alert');
                $(this).css('border','1px solid #FF0000');
            });
        });
</script>

html:

<div id="mainmap"><img src="images/map.jpg" alt="" usemap="#Map"/></div>
<map name="Map" id="Map">
        <area shape="poly" coords="21,326,203,316,220,141,52,153,48,182,37,193,29,220,27,241,28,255,33,259" href="#" alt="1" />
        <area shape="poly" coords="31,405,209,410,225,427,336,427,337,360,200,359,208,317,21,326,15,344,41,360" href="#" alt="11" />
</map>

When i mouse over an area it alerts twice while i think it is supposed to alert once. Also .css() function does not seem to work with this selector.

Please guide how can i fix

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to understand what <map> means, it’s a simple definition on the click areas of an image

    saying $(this).css('border','1px solid #FF0000'); you are telling to make the <map> have a solid border, but <map> is just like the <head> elements, it only contains definitions.

    To make the borders in the areas, you really need to have 2 images instead.

    • 0