javascript - 将鼠标悬停在热点上时带有图像弹出窗口的图像映射

Question

我正在构建一个日历，其中包含特定日期的事件。日历是我为其创建图像映射的 jpg。当您将鼠标悬停在日历上的热点或“事件”上时，我希望图像悬停在鼠标指针旁边，上面将包含事件信息，然后在鼠标离开热点时消失。我有六个热点，每个热点都有一个 javascript 函数。这些函数用正确的事件图像替换弹出图像。下面是其中一个区域和一个功能的示例(其他区域相同，但图像名称和坐标不同)

我在悬停时在日历下方弹出了事件图像，但页面拒绝将图像的位置重新定位到当前鼠标位置。如何使弹出图像重新定位？我究竟做错了什么？还是我应该使用不同的方法？

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> 

Answer 1

也许您可以定位封闭的 div，而不是操纵图像本身的位置。对于 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:

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

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

Working example on JSFiddle