javascript - 使用图像映射在悬停时更改图像

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 Logo 上时，该 Logo 变为红色，当鼠标悬停在 youtube Logo 上时，该 Logo 变为红色等。

提前感谢您的帮助

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>