javascript 将鼠标悬停在热点上时带有图像弹出窗口的图像映射
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15152681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Map with Image popup on hover over hotspot
提问by woodlumhoodlum
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)
我正在构建一个在某些日子有活动的日历。日历是我为其创建了图像映射的 jpg。当您将鼠标悬停在日历上的热点或“事件”上时，我希望将图像悬停在将显示事件信息的鼠标指针旁边，然后在鼠标离开热点时消失。我有六个热点，每个热点都有一个 javascript 函数。这些函数用正确的事件图像替换弹出图像。下面是其中一个区域和一个功能的示例（其他区域相同，但图像名称和坐标不同）
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:
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:
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>
回答by Simon Adcock
Perhaps rather than manipulating the position of the image itself, you could position the enclosing div. For the HTML:
也许不是操纵图像本身的位置，您可以定位封闭的 div。对于 HTML：
<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar">
<br />Click Here To RSVP!</div>
With some CSS for the div:
为 div 使用一些 CSS：
.popup {
position:absolute;
z-index:20000;
top: 0px;
left: 0px;
display: none;
}
And then the JS:
然后是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;
}
Note that I would also use clientX and clientY rather than screenX and screenY:
请注意，我还将使用 clientX 和 clientY 而不是 screenX 和 screenY：
What is the difference between screenX/Y, clientX/Y and pageX/Y?
回答by L0j1k
One thing I have done (in a situation almost exactly like this: A client wanted some pricing boxes to appear when hovering over a price keyword) is almost purely CSS and HTML. You can generate the popup areas inside <a>tags, which are then placed inside some <span>(or absolutely-positioned <div>) placed next to the hover area. You make sure those span/div elements are only defined for the a:hoverselector, and you set them to display:none;on the rest of the a:xselectors, so that the span/div box only appears when you are hovering over the anchor, and disappears when you are not.
我做过的一件事（在几乎完全像这样的情况下：客户希望将鼠标悬停在价格关键字上时出现一些定价框）几乎完全是 CSS 和 HTML。您可以在<a>标签内生成弹出区域，然后将其放置在放置在悬停区域旁边的一些<span>（或绝对定位<div>）内。您确保这些 span/div 元素仅为a:hover选择器定义，并将它们设置display:none;为其余a:x选择器，以便 span/div 框仅在您悬停在锚点上时出现，而在您不在时消失.
