CODEWITHSUNDEEP
javascripthtmlcsspopupimagemap
woodlumhoodlum
woodlumhoodlum

Reputation: 462

Image Map with Image popup on hover over hotspot

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>

Upvotes: 1

Views: 19433

Answers (2)

Simon Adcock
Simon Adcock

Reputation: 3562

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

Upvotes: 3

L0j1k
L0j1k

Reputation: 12635

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.

Upvotes: 0

Related Questions