图像热点映射和鼠标上弹出位置的问题

Issues with image hotspot mapping and popup position onmouse over

本文关键字：出位 位置 问题 热点 映射 鼠标 图像      更新时间：2024-02-11

就我而言，我似乎无法在热点位置的MouseOver上显示弹出图像。当内容添加到div上方时，图像似乎会浮动到页面顶部。下面是我所拥有的由多个片段组成的内容。我使用imageMapResizer.min.js更正了热点大小调整，不认为这会导致冲突。

    function ShowImage(src)
    {
        var img = document.getElementById('popupImage');
        var div = document.getElementById('popup');
        img.src = src;
    }
    function HideImage()
    {
        document.getElementById('popup').style.display = "none";
    }
function pop(e) { //function called by first hotspot
    var thing = document.getElementById("popup");
    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();
    return true;
 }
.popup {
		position:absolute;
        z-index:20000;
		height:200px;
		width:200px;
        display:inherit;
		background-color:#FFF;
		border: 0px solid;
}
<div align="center">
<img name="usaMap" src="images/clientlogo4.png" usemap="#m_usaMap" border="0" width="800px">
<map name="m_usaMap">
        <area shape="poly" coords="33,19,38,93,163,90,161,31" HREF="#" title="Farmboy" onMouseOver="pop(event); javascript:ShowImage('images/1.jpg')"  onMouseOut="pop(event); javascript:HideImage()" '>
  </map>
  </div>
<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="" alt="" /> 
<div id="popup" class="pop-up">
   <img id="popupImage" alt="Popup image" /> 
</div>

以下是修复程序。我会继续尝试清理代码，onMouseOut看起来很草率。慢慢学习。

function pop(e,src) { 
        var thing = document.getElementById("popup");
        var img = document.getElementById('popupImage');
        var div = document.getElementById('popup');
        img.src = src;
    thing.style.top = e.clientY  + 'px';
	thing.style.left = e.clientX + 'px';
	
    $("#popup").toggle();
    return true;
 }
.popup {
		position:absolute;
        z-index:20000;
		height:200px;
		width:200px;
        display:none;
		background-color:#FFF;
		border: 0px solid;
}
<div align="center" style="position:relative;">
<img name="usaMap" src="images/clientlogo4.png" usemap="#m_usaMap" border="0" width="800px">
<map name="m_usaMap">
        <area shape="poly" coords="33,19,38,93,163,90,161,31" HREF="#" title="Farmboy" onMouseOver="pop(event,'images/1.jpg')"  onMouseOut="pop(event); javascript:HideImage()" '>
  </map
  <div id="popup" class="popup" style="position:fixed;">
   <img id="popupImage" alt="Popup image" /> 
</div> 
</div>

相关文章：