Search code examples
javascriptjqueryhtmlimagemap

alert message shows when the user clicks the image without clickable area

I am using a simple image map as per the w3 tutorial,

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="hj.png"  alt="skitch" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,110,210,150" alt="Sun" href="sun.htm">

</map>

I need to alert the user, if he clicks the image's non click able area. I have searched a lot for this and found lot of tutorial, but couldn't find the exact. Is there any way to do it in java script, though I am newbie to jquery. If there is only jquery solution, please give me some tutorials with examples.

Any help appreciated!

Solution

  • Create new clickable areas in the image map that cover the areas the person shouldn't click then set it like this:

    <area shape="rect" coords="0,110,210,150" alt="Not Here" href="#" onclick="alert('Don\'t click here')">