Image Map with Image popup on hover over hotspot

Question

I am building a calendar that has events on certain days. The calendar is a jpg that I have created an image map for. When you hover over a hotspot or "event" on the calendar, I want an image to hover next to the mouse pointer that will have the event information on it, and then disappear when the mouse goes off of the hotspot. I have six hotspots, and a javascript function for each. The functions replace the popup image with the correct event image. Below is an example of just one of the areas along with one function (the others are identical w/ different image names and coords)

I had the event images popping up below the calendar on hover but the page refused to relocate the position of the image to the current mouse location. How can I make the popup image relocate? What am I doing wrong? or should I be using a different method?

JS:

function pop(e) { //function called by first hotspot
        Image.src = "../img/Bubble - Aloha.png" //event image
        document.popup1.src = Image.src; 
        var thing = document.getElementById("popup1");

        $("#popup1").toggle();
        thing.style.left = e.screenX + 'px';
        thing.style.top = e.screenY + 'px';

        return true;
        }

MAP:

<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);"  onMouseOut="pop(event);"/>
...</map>

HTML:

<ul><li>
        <img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
    </li>
    <li>
        <div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;> 
        </div><br />Click Here To RSVP! 
    </li>
</ul>

score 3 · Accepted Answer · edited May 23 '17 at 11:49

3

Perhaps rather than manipulating the position of the image itself, you could position the enclosing div. For the HTML:

<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar"> 
<br />Click Here To RSVP!</div>

With some CSS for the div:

.popup {
        position:absolute;
        z-index:20000;
        top: 0px;
        left: 0px;
        display: none;
}

And then the JS:

function pop(e) { //function called by first hotspot

    Image.src = "../img/Bubble - Aloha.png" //event image
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup");

    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();

    return true;
 }

Note that I would also use clientX and clientY rather than screenX and screenY:

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Working example on JSFiddle

edited May 23 '17 at 11:49

Community

1
1

answered Mar 01 '13 at 08:46

Simon Adcock

3,554
3
25
41

I had tried that before, and that's why I originally created that div. But good tip on using clientX instead, I tried all three and wasn't really sure about their difference. – woodlumhoodlum Mar 01 '13 at 23:00
No worries. Could you not get it to work? I think the clientX / clientY thing was the main change you needed, the code seemed to work perfectly after that. – Simon Adcock Mar 01 '13 at 23:13
Nope, changed the clientx/y and it didn't help. The image was still stuck below. – woodlumhoodlum Mar 02 '13 at 21:56
1

Sure, you'll need to update your JS to show the div rather than just the image. Check out this JSFiddle, hover over the first of the month: http://jsfiddle.net/SiCurious/CjrU4/ – Simon Adcock Mar 03 '13 at 18:09
wow! thank you. It seems to be a problem w/ my css, I think I had conflicting code that prevented "position:absolute" from doing it's job in popup. I appreciate the working example. – woodlumhoodlum Mar 03 '13 at 19:38

score 0 · Answer 2 · answered Mar 01 '13 at 07:40

One thing I have done (in a situation almost exactly like this: A client wanted some pricing boxes to appear when hovering over a price keyword) is almost purely CSS and HTML. You can generate the popup areas inside <a> tags, which are then placed inside some <span> (or absolutely-positioned <div>) placed next to the hover area. You make sure those span/div elements are only defined for the a:hover selector, and you set them to display:none; on the rest of the a:x selectors, so that the span/div box only appears when you are hovering over the anchor, and disappears when you are not.

I had tried surrounding the "popup" div with a span, but for some reason I don't think I was able to set "top" and "left" to any value that landed the image within the image. As if it was forcing it below the calendar. I'll try that with the anchor tag, maybe that's the trick. Or it could be bc I placed it inside of a list tag. I'll let you know how that goes tomorrow. — woodlumhoodlum, Mar 01 '13 at 07:47

Image Map with Image popup on hover over hotspot

2 Answers2

Linked