使用图片地图更改悬停图片

Question

我想找到一种最简单的方法来更改图像，具体取决于鼠标悬停在图像的哪一部分。

1. 想法是首先创建所有可能的图像选项。
2. 获取基本图像并将其映射
3. 当鼠标悬停在选定区域上时，“ onmouseover”将图像源替换为创建效果所需的图像源。

我已经创建了一个我想做的简单测试样本：

基本图片：https://i.imgur.com/FTAtJutl.jpg

更改图像：https://i.imgur.com/p5oiGSOl.jpeg

这个想法是，当鼠标移到“ Facebook”徽标上时，它将从蓝色变为红色。

function redFacebook(x) {
  document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
}

<img id= "imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="redFacebook(x)"/>
</map>

我想进一步介绍这个想法，并在多个区域进行多个不同的图像更改，将鼠标悬停在instagram徽标上时，该徽标变为红色；当鼠标悬停在youtube徽标上时，该徽标变为红色等。

非常感谢您的帮助

Answer 1

一个想法是对所有图像使用相同的侦听器，然后有一个switch语句，该语句将检查传入的参数并突出显示对应的图像，现在它起作用了，x通过引发错误，因为它不存在。另外，您还需要一个Mouseleave侦听器来删除突出显示。

演示

function mouseover(x) {
  switch (x) {
    case 'facebook':
      {
        document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";
      };
      break;
    case 'instagram':
      {

      };
      break;
    case 'twitter':
      {

      };
      break;
      // etc... 
    default:
      ;
      break;
  }

}

// reset the image when the user isn't hovering.
function mouseleave() {
  document.getElementById("imageid").src = "https://i.imgur.com/FTAtJutl.jpg";
}

<img id="imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('facebook')"
onmouseleave="mouseleave()"    
    />
    
    <!--
    
    <area alt="twitter" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('twitter')"
onmouseleave="mouseleave()"    
    />
        <area alt="instagram" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('instagram')"
onmouseleave="mouseleave()"    
    />
     etc 
     
     
     -->
</map>