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

2022-01-20 00:00:00 popup javascript html css imagemap

我正在构建一个日历，其中包含特定日期的事件.日历是我为其创建了图像映射的 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 上的工作示例

相关文章