如何在图像地图中显示悬停图像答案

【问题标题】：How to show image on hover in image map如何在图像地图中显示悬停图像
【发布时间】：2021-09-23 08:26:05
【问题描述】：

我有一张图片地图。我想在图像地图中悬停一个区域时显示图像。但有可能吗？我的意思是即使我在悬停时显示图像，我希望图像映射在我单击它并指向另一个页面时继续工作。

这是图像映射的示例： https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

【问题讨论】：

我相信这是可能的，但问题是，您尝试过什么？悬停时还希望图像显示在哪里？
例如，当我将电脑悬停时，我想显示一张图片（例如：images.unsplash.com/…" width="200" class="hover-img" />）

标签： javascript html jquery css imagemap

【解决方案1】：

您可以添加如下内容：

<style>
area[alt=Computer]:hover::after {
    content:'';
    background-image: url('https://placeimg.com/1600/1275/people');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 200px;
    height: 175px;
}
</style>

这将在您悬停的图像正下方显示一个图像。然后你可以对其他区域做同样的事情

如果您希望图像显示在原始图像之上，您可以尝试添加

position: absolute;

但是你必须确保有一个父元素

position: relative;

为了它被定位。比如这样：

<style>
  .container {
      position: relative;
  }
  area[alt=Computer]:hover::after {
      content:'';
      background-image: url('https://placeimg.com/200/175/people');
      background-size: 100%;
      background-repeat: no-repeat;
      display: block;
      width: 200px;
      height: 175px;
      position: absolute;
      top: 20px;
      left: 20px;
  }
</style>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<div class="container">
  <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

  <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
  </map>
</div>

【讨论】：