Member Avatar for 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

Edited by Tewhano
  • 4 Contributors
  • 8 Replies
  • 200 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Tewhano

Dani AI

Generated

Short summary and root cause: an absolutely positioned element is placed relative to the nearest ancestor that has a non-static position (position: relative/absolute/fixed). If that ancestor (your image wrapper) changes size when the browser resizes, pixel offsets (left/top in px) will no longer line up. Percent values can work, but they must be computed against the image's natural dimensions so they scale correctly when the image is resized.

Practical, robust approach: keep the popup as a child of the image wrapper (wrapper: position: relative). Compute the hotspot center from the <area> coords in relation to the image's naturalWidth/naturalHeight, then set the popup left/top as percentages (or scaled pixels). Reposition on image load and on window resize. Use a CSS transform like translate(-50%,-110%) to place the popup centered above the hotspot and avoid fiddly manual offsets.

Example CSS (place popup inside the wrapper):

.map-wrap { position: relative; display: inline-block; }
.flag-popup {
  position: absolute;
  display: none;
  transform: translate(-50%,-110%);
  pointer-events: none;
  z-index: 100;
}

Minimal vanilla JS outline (avoid jQuery):

const img = document.querySelector('.map-image');
const areas = document.querySelectorAll('area[data-popup]');

function getPercentPos(cx, cy){
  const natW = img.naturalWidth, natH = img.naturalHeight;
  return { x: (cx / natW) * 100, y: (cy / natH) * 100 };
}

areas.forEach(a => {
  a.addEventListener('mouseenter', function(){
    const coords = this.coords.split(',').map(Number); // circle: cx,cy,r
    const popup = document.getElementById(this.dataset.popup);
    const pos = getPercentPos(coords[0], coords[1]);
    popup.style.left = pos.x + '%';
    popup.style.top  = pos.y + '%';
    popup.style.display = 'block';
  });
  a.addEventListener('mouseleave', () => {
    document.getElementById(a.dataset.popup).style.display = 'none';
  });
});

window.addEventListener('resize', () => { /* recompute visible popups if needed */ });

Notes/troubleshooting: wait for the image load event so naturalWidth/naturalHeight are available; clamp popup position to viewport if it might overflow; if <area> event behavior is flaky, consider absolutely positioned anchor elements over the image instead. This keeps the behavior responsive (better than fixed px) and addresses the exact issues raised by , complements 's percentage idea, and gives a jQuery-free solution as and discussed.

Recommended Answers

All 8 Replies

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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. :)

Member Avatar for paulkd

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

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.