JavaScript-如何在图像地图中显示图像-堆栈溢出

顺晟科技

2022-10-18 13:57:17

122

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

下面是图像映射的示例：https：//www.w3schools.com/html/tryit.asp？filename=tryhtml_images_map2.

<代码><；！文档类型HTML>；<；HTML（>；）<；身体>；<；H2>；图像映射<；/H2>；<；P>；点击电脑、电话或咖啡，进入新的页面，阅读更多相关主题：<；/p>；<；IMG SRC="；工作场所.JPG"；alt="；工作区"；用户映射="；#工作映射"；宽度="；400"；高度="；379"；>；<；映射名称="；工作图"；>；<；区域形状="；矩形"；坐标=34，44，270，350alt=“计算机”href="；Computer.HTM"；>；<；区域形状="；矩形"；坐标=“ 290，172，333，250 ”alt="；电话"；href="；电话.HTM"；>；<；区域形状="；圆形"；坐标=337，300，44alt="；一杯咖啡"；href="；咖啡.HTM"；>；<；/映射>；<；/正文>；<；/HTML>；

顺晟科技：

您可以添加以下内容：

<代码><；样式>；区域[alt=计算机]：悬停：之后{内容：' '；background-image：URL（https：//placeimg.com/1600/1275/people'）；背景大小：100%；背景重复：无重复；显示：块；宽度：200px；高度：175px；}<；/样式>；

这将在您悬停的图像正下方显示一个图像。然后，您可以对其他区域

执行相同的操作

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

<!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>

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

<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>

因为它被定位在。例如：

<代码><；样式>；.容器{位置：相对；}区域[alt=计算机]：悬停：之后{内容：' '；background-image：URL（https：//placeimg.com/200/175/people'）；背景大小：100%；背景重复：无重复；显示：块；宽度：200px；高度：175px；位置：绝对；顶部：20px；左：20px；}<；/样式>；<；H2>；图像映射<；/H2>；<；P>；点击电脑、电话或咖啡，进入新的页面，阅读更多相关主题：<；/p>；<；DIV类="；容器"；>；<；IMG SRC="；工作场所.JPG"；alt="；工作区"；用户映射="；#工作映射"；宽度="；400"；高度="；379"；>；<；映射名称="；工作图"；>；<；区域形状="；矩形"；坐标=34，44，270，350alt=“计算机”href="；Computer.HTM"；>；<；区域形状="；矩形"；坐标=“ 290，172，333，250 ”alt="；电话"；href="；电话.HTM"；>；<；区域形状="；圆形"；坐标=337，300，44alt="；一杯咖啡"；href="；咖啡.HTM"；>；<；/映射>；<；/DIV>；

上一篇：堆栈溢出报错:确认对话框-堆栈溢出下一篇：JavaScript-从字符串中设置

网站建设

Html

JavaScript-如何在图像地图中显示图像-堆栈溢出