当我的鼠标移动到图片的某个区域时，如何显示新图片？答案

【问题标题】：How to display a new picture when my mouse move to a certain area of the picture?当我的鼠标移动到图片的某个区域时，如何显示新图片？
【发布时间】：2021-04-04 23:53:18
【问题描述】：

每个人。当我的鼠标移动到原始图片的特定区域时，我想在原始图片下显示一张新图片。而且我是 HTML 和 CSS 的新手，所以我仍然找不到修复它的方法。我已经尝试了一些代码，但我无法组合在一起。原始图片是“Cata_all”，图像应该显示在它下面，是“catabottoff”

<body>        
    <map src="graph/Cata_all.jpg" name="productmap">
        <area shape="rect" coords="5,205,150,250" href="catabottoff.jpg" target="">    
    </map>
    <img src="graph/Cata_all.jpg" usemap="#productmap">     
</body>

我也尝试过的另一个代码是 onmouseover：

<table border=0 height="50%" width="50%">
        <tr valign="top">
            <td width="20%">
                <img onmouseout="this.src='graph/Cata_all.jpg'" onmouseover="this.src='graph/catabottoff.jpg'" src="graph/Cata_all.jpg"/>
                <map src="graph/Cata_all.jpg" name="productmap">
                <area shape="rect" coords="5,205,150,250" href="" >

如果你能给我一些提示，我真的很感激。非常感谢~

【问题讨论】：

这能回答你的问题吗？ Change the mouse pointer using JavaScript

标签： javascript html css

【解决方案1】：

虽然有些部分不清楚您的要求，但我认为这个基本示例应该为您提供一种创建所需内容的方法。

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

使用一点 javascript，您可以构建类似 this 的东西

还有一种 Javascript 方式可以做到这一点，但我不确定这是否是您的要求。

<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379" id="mainImage">

<!-- You can remove Href attribute from area to make sure they're not redirecting to a different page -->
<map name="workmap">
  <area id="computer" shape="rect" coords="34,44,270,350" alt="Computer">
  <area shape="rect" coords="290,172,333,250" alt="Phone">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee">
</map>

<script>

// This will change the image when you mouseover the Computer.
// This is just a basic example that will help you understand how you can change the main image on mouseover.
 
var computerArea = document.querySelector("#computer");
var mainImage = document.querySelector("#mainImage");

// Adding mouseover listener to the computer area - this could be done for other parts as well.
computerArea.addEventListener("mouseover", function(e){
    mainImage.src = "https://lh3.googleusercontent.com/proxy/4K3cpWUfEVjCSCpoFfYGq2i8KBZZ0f52WQrO7A1e-SzmoX78gwahuwM_Y6u6dR6PhMHuxiP145NiLptVvUQSYfSbQtt0QjDncQ" // Your new image
});
</script>

【讨论】：

非常感谢！我可以理解在做什么，但是如果我使用，href=" " 将把我带到另一个 HTML 页面。我想要的是我的鼠标指针移到图像的特定部分上，然后图像在同一页面上变为另一个图像。
@JasonWu - 请试试这个：codepen.io/rehanhaider/pen/OJWgyyO?editors=1000