Img map with mouseover

Navigation
1

This is the code I currently have: 

<img src="images/2.jpg" style="height:973px" border="0"  
onmouseover="this.src='images/1.jpg'" onmouseout="this.src='images/2.jpg'" 
usemap="#image-map" >

<map name="image-map">
<area alt="CMPC Melhoramentos" title="CMPC Melhoramentos" href="../Cliente SP/production/iindex.php" coords="752,655,546,415" shape="rect">
<area alt="Indaial Papel" title="Indaial Papel" href="../IPEL/production/iindex.php" coords="1576,648,1308,413" shape="rect">

The map is set to the 1.jpg image, which appears when you hover the mouse. However, when I hover the mouse precisely over the rectangle set on the map (to click) it returns to the initial image, the 2.jpg , as if I had taken the mouse. How can I make sure this does not happen?

    
asked by anonymous 25.06.2018 / 15:18

2 answers

1

Place in your <map> a onmouseover by changing to the same image of onmouseover of tag <img> : 

<map name="image-map" onmouseover="document.querySelector('[usemap=\'#image-map\']').src='images/1.jpg'">

Do not forget to close the <map> tag: 

<map ....>
  ....
</map> ← fechar a tag
    
25.06.2018 / 15:56
0

An example of how you can do without JS only with CSS. In case they are two images, one above the other, but when you can the mouse in the div the image above is added and you can use the map of the image below. Au move the mouse from the image to another image appears again.

See the example:

Mouse over the planets. 

div {
    position: relative;
}
div img {
    position: absolute;
}
div:hover img+img {
    display: none;
}
<div >
    <img src ="https://www.w3schools.com/js/planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> 
    <img src ="https://placecage.com/100/100" width ="145" height ="126" alt="" /> 

    <map name="planetmap">
    <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" />
    
    <area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" />
    
    <area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" />
    </map>
</div>
    
25.06.2018 / 16:06
Encapsulation of random amounts - is it possible? Error while trying to display the information of an object in a p: dialog /