在热点上悬停时带有图像弹出窗口的图像地图 [英] Image Map with Image popup on hover over hotspot

问题描述

我正在建立一个日历，其中包含某些日期的事件.日历是我为其创建图像图的jpg.当您将鼠标悬停在日历上的热点或事件"上时，我希望图像停留在鼠标指针旁边，该鼠标指针上将有事件信息，然后在鼠标离开热点时消失.我有六个热点，每个热点都有一个javascript函数.该功能将弹出图像替换为正确的事件图像.下面仅是其中一个区域以及一个功能的示例(其他区域是相同的，带有不同的图像名称和坐标)

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 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> 

推荐答案

也许可以操纵封闭的div，而不是操纵图像本身的位置.对于HTML:

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>

使用一些div的CSS:

With some CSS for the div:

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

然后是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;
 }

请注意，我还将使用clientX和clientY而不是screenX和screenY:

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

之间的区别是什么screenX/Y，clientX/Y和pageX/Y?

在JSFiddle上工作的示例

这篇关于在热点上悬停时带有图像弹出窗口的图像地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！