图像映射：显示鼠标悬停区域的替代图像答案

【问题标题】：image map: show alternate image of areas on mouseover图像映射：显示鼠标悬停区域的替代图像
【发布时间】：2014-05-23 07:17:45
【问题描述】：

假设我想创建具有两个鼠标悬停效果的交互式合影：

a) 在上方显示工具提示并
b) 突出显示人物/显示替代图像。

我想要做的与this 非常相似（查看地图#2）-我希望在页面加载时合影全部变暗并突出显示每个人/显示替代图像（例如，相同的照片但彩色）鼠标悬停。

我已经有了带有工具提示的图像映射（请注意，areas 在这里并不完全准确，因为我需要使用另一个图像）。

My code on FIDDLE

【问题讨论】：

标签： jquery html css imagemap

【解决方案1】：

Here's a CodePen.

我能够在不使用任何 JavaScript 的情况下提出解决方案。 Map #2 示例似乎使用了<dl> 和<dd> 元素，它们非常模糊，但我同意了。我认为你可以用<figure> 和其他更精确的元素做同样的事情。如果不使用区域，则需要为悬停的每个元素设置不同的“悬停”图像，以便处理矩形中的任何重叠区域。

HTML

<dl class="map">
  <dd>
    <figcaption>
      <p>Man 1</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 2</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 3</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 4</p>
    </figcaption>
  </dd>
  <dd>
    <figcaption>
      <p>Man 5</p>
    </figcaption>
  </dd>
</dl>

CSS

.map {
  display: block;
  margin: 50px 0px 0px 40px;
  padding: 0px;
  position: relative;
  background: url('map_silhouette_black.png');
  width: 600px;
  height: 400px;
}

.map dd {
  display: block;
  margin: 0px;
  padding: 0px;
  position: absolute;
  cursor: pointer;
}

.map dd figcaption {
  display: none;
  margin: -50px 0px 0px -60px;
  padding: 10px;
  position: relative;
  background: #333;
  color: #FFF;
  font: 14px sans-serif;
  text-align: center;
  border-radius: 100%;
  width: 120px;
  box-sizing: border-box;
}

.map dd figcaption:before {
  content: '';
  display: block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  border: 10px #333 solid;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.map dd:hover figcaption {
  display: block;
}

.map dd:nth-child(1) {
  top: 20px;
  left: 20px;
  background-position: -20px -20px;
  width: 115px;
  height: 335px;
}

.map dd:nth-child(2) {
  top: 20px;
  left: 135px;
  background-position: -135px -20px;
  width: 115px;
  height: 345px;
}

.map dd:nth-child(3) {
  top: 5px;
  left: 250px;
  background-position: -250px -5px;
  width: 125px;
  height: 385px;
}

.map dd:nth-child(4) {
  top: 25px;
  left: 360px;
  background-position: -360px -25px;
  width: 120px;
  height: 350px;
}

.map dd:nth-child(5) {
  top: 25px;
  left: 470px;
  background-position: -470px -25px;
  width: 110px;
  height: 330px;
}

.map dd:nth-child(1):hover {
  background-image: url('map_silhouette_color1.png');
}

.map dd:nth-child(2):hover {
  background-image: url('map_silhouette_color2.png');
}

.map dd:nth-child(3):hover {
  background-image: url('map_silhouette_color3.png');
}

.map dd:nth-child(4):hover {
  background-image: url('map_silhouette_color4.png');
}

.map dd:nth-child(5):hover {
  background-image: url('map_silhouette_color5.png');
}

【讨论】：

非常酷，正是我需要的。你真棒。我可以问你最后一个愚蠢的问题：你是如何得到每个<dd> 元素的top、left 和width 值的？它们基于您用于地图的图像，对吗？
我刚刚尝试通过更改top、left、width 和height 值来移动<dd> 元素。 background-position 将始终为 -left 和 -top ，允许悬停图像与原始图像大小相同。它有助于为<dd> 元素提供临时背景颜色，例如半透明的rgba(0, 0, 0, 0.5)，以便您知道将它们放置在何处。
@phantomesse 你能看看我的问题并帮助我吗stackoverflow.com/q/24078704/2118383

【解决方案2】：

测试这段代码：

$(document).ready(function(e) {
    $('.wrapper area').each(function () {
        // Assigning an action to the mouseover event
        $(this).mouseover(function (e) {
            $('.popup').show();
        });
        // Assigning an action to the mouseout event
        $(this).mouseout(function (e) {
            $('.popup').hide();
        });
    });
});

【讨论】：