如何在Image Map中点击热点后在图片旁显示弹出框

要把弹出框移到图片旁边，你需要调整弹出框的定位逻辑，从固定位置改为基于图片的动态定位，具体修改如下：

1. 调整CSS样式 #

修改#myBubble的定位属性，去掉固定的top和left，改为相对容器右侧定位并预留间距：

#myBubble{ 
  position: absolute; 
  background: #fff; 
  border: 1px solid #aaa; 
  padding: .5rem 1rem; 
  display: none; 
  /* 替换原固定top/left */
  top: 0;
  left: calc(100% + 1.5rem); /* 图片宽度 + 间距 */
  width: 15rem; 
}

如果想让弹出框和图片垂直居中对齐，可把top:0替换为：

top: 50%;
transform: translateY(-50%);

2. 适配响应式的JS优化（可选） #

为确保图片尺寸变化时，弹出框垂直位置始终和图片匹配，可在openBubble函数中动态获取图片位置：

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  // 获取图片和容器的位置差，设置弹出框垂直位置
  const imgRect = document.getElementById('myImage').getBoundingClientRect();
  const wrapperRect = document.getElementById('myWrapper').getBoundingClientRect();
  bubble.style.top = (imgRect.top - wrapperRect.top) + 'px';
  bubble.className = 'shown';
}

修改后的完整代码 #

HTML

<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>

<div id="myWrapper">
   <img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" />

 <map name="myMap" id="myMap">
  <area id="left-eye"  coords="118,36,148,80" shape="rect">
  <area id="mouth"  coords="121,84,198,118" shape="rect">
</map>

   <div id="myBubble">
      <div id="myBubbleContent"></div>
      <div id="myBubbleCloseButton">✕</div>
    </div>
</div>

CSS

#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{ 
  position: absolute; 
  background: #fff; 
  border: 1px solid #aaa; 
  padding: .5rem 1rem; 
  display: none; 
  top: 0;
  left: calc(100% + 1.5rem);
  width: 15rem; 
}
#myBubble.shown{ display: block; }
#myBubble img{ display: block; width: 100%; }
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; background: #eee; line-height: 1; cursor: pointer; }
#myBubbleCloseButton:hover{ background: #000; color: #fff; }

JavaScript

var myData = {
    "left-eye": {
        "title": "This point A",
        "description": "Lorem ipsum A dolor sin amet."
    },
    "mouth": {
        "title": "This point B",
        "description": "Lorem ipsum B dolor sin amet."
    },
};
var areas         = document.getElementsByTagName('area'),
    bubble        = document.getElementById('myBubble'),
    bubbleContent = document.getElementById('myBubbleContent'),
    bubbleClose   = document.getElementById('myBubbleCloseButton');

// 绑定热点点击事件
for(var i=0, l=areas.length; i<l; i++) {
  areas[i].addEventListener('click', openBubble, false);
}

// 绑定关闭按钮事件
bubbleClose.addEventListener('click', closeBubble, false);

function openBubble() {
  var content = myData[this.id];
  bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
                          + '<img src="' + content.image + '" alt="" />'
                          + '<p>' + content.description + '</p>';
  // 动态设置弹出框垂直位置
  const imgRect = document.getElementById('myImage').getBoundingClientRect();
  const wrapperRect = document.getElementById('myWrapper').getBoundingClientRect();
  bubble.style.top = (imgRect.top - wrapperRect.top) + 'px';
  bubble.className = 'shown';
}

function closeBubble() {
  bubble.className = '';
}

// 使图片映射响应式
imageMapResize();

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