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

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

Answer 2

我做过的一件事（在几乎完全一样的情况下：客户希望在将鼠标悬停在价格关键字上时出现一些定价框）几乎是纯 CSS 和 HTML。您可以在<a> 标签内生成弹出区域，然后将其放置在悬停区域旁边的一些<span>（或绝对定位的<div>）内。您确保这些 span/div 元素仅针对 a:hover 选择器定义，并在其余的 a:x 选择器上将它们设置为 display:none;，这样 span/div 框仅在您将鼠标悬停在上方时出现锚，当你不在时消失。