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

Answer 2

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

图像地图与图像弹出窗口悬停在热点上

2 个答案: