change image on hover with image map

Question

I want to find the easiest way to be able to change an image depending on what part of the image the mouse is over.

1. The idea was to first create all the possible image options.
2. Take the base image and map it
3. When the mouse is over the selected area "onmouseover" replace the image source with the one that is desired to create the effect.

I have created a simpler test sample of what I want to do:

Base image: https://i.sstatic.net/7aSp9.jpg

Change image: https://i.sstatic.net/Ej6nd.jpg

The idea is when the mouse goes over the "Facebook" logo, it will change from blue to red.

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

<img id= "imageid" src="https://i.sstatic.net/7aSp9.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>

I want to take this idea further and have a multiple areas with multiple different image changes, when mouse over instagram logo, that logo goes red, when mouse over youtube logo, that goes red etc.

Thanks for the help in advance

Answer 1

an idea would be to use the same listener for all the images then have a switch statement that will check the parameter that is passed in and highlight the corresponds image, right now it work, the xyou're passing is throwing an error because it doesn't exists. also you'll need a mouseleave listener to remove the highlighting.

Demo

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>