Javascript to hover separate selection

Question

I'm trying to do the following using JavaScript :

1. When hovering over the map, it must mark the area below the mouse cursor.
2. Being able to make a new window when you click that selected area.

[What i have achieved already - hover working over the rectangle on left side of map

However, I need the area to be working for other things than squares & geometric objects. What is the best/easy way to execute it so you can select areas like on the below image?

Image with selections

Answer 1

Basically you can use area tag Like below :

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Here is the link : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

So you can assign a ID to each area , and you can write hover , click codes for those in javascript.