1

我正在构建一个在某些日子有事件的日历。日历是我为其创建了图像映射的 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>
4

2 回答 2

3

也许您可以定位封闭的 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：

screenX/Y、clientX/Y和pageX/Y有什么区别？

JSFiddle 上的工作示例

于 2013-03-01T08:46:05.750 回答
0

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

于 2013-03-01T07:40:35.833 回答