[adz_619]

I am in the process of creating a desktop-style website. I have an image map which has hotspots for all the different icons on my website. When an icon is clicked a div should popup.

Below is my div code from the css:

#about {
border: 1px solid #ccc;
height: 120px;
width: 400px;
overflow: auto;
margin: 1em 0;
} 

Here is my image map code:

HTML Code:

<img src="map/map.png" alt="Desktop Image map" border="0" usemap="#desktop" />
<map name="desktop" id="desktop"><area shape="rect" coords="20,78,87,152" href="#" alt="Home Icon" />
<area shape="rect" coords="123,77,177,153" href="#" alt="About Icons" />
<area shape="rect" coords="220,81,271,157" href="#">onclick="" target="_self" alt="Work Icon" />
</area></map>

What do I need to put in the onClick section for the about div to pop up on top of the image map, not above or below!

Thanks in advance
Adam

[UnrealEd]

you need to get the current mouse position, either by using the passed on event object (event.clientX and event.clientY), or by tracking the mouse position when moving across the html page (onmousemove). When you found the position, you have to set the "top" and "left" property of the div's style

[adz_619]

I understand what you are saying, but how would I track the mouse position using code. I know the coords for the icons on the page. How would I track and set the "top" and "left" property in code???