Absolute image position on hotspot

[Tewhano]

I am trying to get an image popup of a flag when the cursor is over a hotspot on an imagemap. The part that I can’t get to work sufficiently is the position of the image relative to the mouse pointer or hotspot. I want the image to pop up close to the hotspot regardless of the user resizing the browser window. What I get is it appears further away when the window is resized larger or slightly to the left when the widow shrinks. Here is what I have so far:

'<!-- Script adapted from Internet search -->'
'<script type="text/javascript">'
'function displayImage(imgid)'
'{document.getElementById(imgid).style.display ='block';}'
'function hideImage(imgid)'
'{document.getElementById(imgid).style.display ='none';}'
'</script>'

'<div id= "wrap" style="position: relative;">'
'<p><img src = "../images/world-map.jpg" width=800 height=480 usemap="#ImgMap0" /></p>'
'<map id="ImgMap0" name="ImgMap0">'
'<area shape="circle" coords="188, 402, 10" href="elliot_history.html"onMouseOver="displayImage'('nz')"onMouseOut="hideImage('nz')" alt="New Zealand" />'
'</map>'
'<img class="hidden" id="nz" src="../flags/nz.jpg">'
'</div>'

Navy.css file:

'/* Image Map styles */'
'#empty{position:absolute; z-index:12;}'

'#ImgMap0{position:absolute;}'

/* Styles for the Flags */
'#nz{'
'position:absolute;'
'left:280px;'
'top:290px;}'

I tried making the position of #nz relative but then it disappears below the image map.

My page is here: http://www.eta-carina-ltd.com/page7/navy/map.html

[mattster]

Personally I think this is something for jQuery, that way you can assign the popup to the cursor location, so the popup will hover WITH the cursor

[Tewhano]

This is for a collage assignment and we are not allowed to use jquery. The best way to do something is not what they expect from the students. They are only interested in the students using the tools they cover in the course.

[TonyG_cyprus]

The problem with absolute positioning by pixels, is exactly what you are experiencing, if the browser is re-sized, or the site is viewed on a different size screen, the element is still, in this case,
280pixels from the left, and 290pixels from the top. Try using percentage positioning i.e left:80%;
top:63%; or whatever.

[paulkd]

This is for a collage assignment and we are not allowed to use jquery...They are only interested in the students using the tools they cover in the course.

But you are using JavaScript. jQuery is simply a user defined JavaScript function. :)

[paulkd]

Did you fix your problem? Seems to work fine (on Chrome) for me.

[Tewhano]

I thought the absolute positioning was in relation to the container it was in. Is the position from the browser window then? I'll try the percentage and see how it goes. Thanks for the input.

[TonyG_cyprus]

It's confusing, check Click Here this out.

[Tewhano]

I think I found the solution. I was right about the pop-up position being related to the container it is in but what I forgot was the container grows with the browser's window. I will try setting the height and width of the DIV to the image size. I think that will solve the problem. Look Ma...no scripts.