如何使用jQuery为Image Map动态设置CSS的top和left属性？

当然可以实现动态定位弹出层！我们可以通过两种方式来实现：一种是利用鼠标hover时的坐标，另一种是解析area标签的coords属性获取区域位置，然后动态设置overlay的top和left值，让它靠近当前hover的区域。

下面是修改后的完整代码，我会在后面解释关键改动：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<style id="compiled-css" type="text/css">
#map { position: relative; }
#overlay { 
  position: absolute; 
  background: #000; 
  color: #fff; 
  width: 100px;
  padding: 4px;
  display: none; /* 默认隐藏，hover时再显示 */
}
</style>
<div id="map">
  <div id="overlay"></div>
  <img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1">
</div>
<map name="g1">
  <area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com">
  <area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com">
  <area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com">
  <area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com">
  <area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com">
  <area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com">
  <area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com">
  <area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com">
  <area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com">
  <area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com">
</map>
<script type="text/javascript">//<![CDATA[
$('area').each(function(){
  var area = $(this), alt = area.attr('alt');
  area.mouseenter(function(event){
    // 获取#map元素的位置偏移
    var mapOffset = $('#map').offset();
    // 计算鼠标相对于#map的坐标（因为overlay是相对于#map定位的）
    var relativeX = event.pageX - mapOffset.left;
    var relativeY = event.pageY - mapOffset.top;
    
    // 设置overlay的位置，加上10px的偏移避免贴紧鼠标
    $('#overlay')
      .html(alt)
      .css({
        top: (relativeY + 10) + 'px',
        left: (relativeX + 10) + 'px',
        display: 'block'
      });
  }).mouseleave(function(){
    $('#overlay')
      .html('')
      .css('display', 'none');
  });
});
//]]></script>

关键改动说明： #

1. CSS调整：给#overlay添加了display: none默认隐藏，hover时再显示，同时加了内边距让文字更美观。
2. 鼠标坐标获取：在mouseenter事件里，通过event.pageX和event.pageY获取鼠标在页面上的绝对坐标，再减去#map的偏移量（$('#map').offset()），得到鼠标相对于#map的相对坐标——因为#overlay是绝对定位在#map内部的，所以必须用相对坐标来设置位置。
3. 动态设置位置：把计算好的相对坐标加上一点偏移（比如10px），赋值给overlay的top和left，这样弹出层就会出现在鼠标hover位置的右下方，不会挡住当前区域。

另一种思路：解析area的coords属性定位 #

如果你希望弹出层固定在区域的某个位置（比如区域中心），而不是跟着鼠标走，可以解析coords属性的坐标值：

area.mouseenter(function(){
  var coords = $(this).attr('coords').split(',');
  // 对于rect形状，coords是[左, 上, 右, 下]
  var areaLeft = parseInt(coords[0]);
  var areaTop = parseInt(coords[1]);
  var areaWidth = parseInt(coords[2]) - areaLeft;
  
  $('#overlay')
    .html(alt)
    .css({
      top: (areaTop + 10) + 'px',
      // 让弹出层对齐区域中心（减去overlay宽度的一半）
      left: (areaLeft + areaWidth/2 - 50) + 'px', 
      display: 'block'
    });
});

这种方法适合你希望弹出层位置和区域绑定，而不是跟随鼠标的场景。

内容的提问来源于stack exchange，提问作者Ahdee