javascript - 鼠标悬停时图像热点映射和弹出位置的问题

Question

对于我的生活，我似乎无法在热点位置显示 onMouseOver 的弹出图像。当在 div 上方添加内容时，图像似乎 float 到页面顶部。以下是我拥有的由多个片段组成的内容。我使用 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> 

Answer 1

以下是修复。我会继续尝试清理代码，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>