Img map with mouseover

Asked

Viewed 522 times

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 for the image 1.jpg, that appears when passing the mouse. However, when I step the mouse precisely over the rectangle set in the map (to click) it goes back to the initial image, the 2.jpg, as if I had taken off the mouse. How can I make it not to happen?

html html5 image maps

  • Edit your question and also include your CSS related to the problem.

  • I’m not actually using CSS in this case, just this html code.

  • It became clearer now. What happens is that when you do the Hover on the map the image loses the :Hover and goes back to the image 2

  • I get it... there’s some way that it doesn’t happen?

  • I did not understand. Image 2 is the initial. When passing the mouse goes to image 1, when taking the mouse also goes to image 1

  • Behold: onmouseover="this.src='images/1.jpg'" onmouseout="this.src='images/1.jpg'" ... is all picture 1

  • I believe so, I don’t know much about JS so I won’t know how to answer you accurately. But another way to do it would be to replace 1/2 in :Hover with CSS, so you wouldn’t need the onmouseover of JS

  • I already changed the code, in onmouseout was the image 2 same.

  • Hugo, I tried some code in CSS but I didn’t succeed, I don’t know much about CSS so I might have missed something. If you have any suggestions, I’d appreciate it.

Show 4 more comments

2 answers

1


Put in your <map> one onmouseover changing to the same image of onmouseover tag <img>:

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

Don’t forget to close the tag <map>:

<map ....>
  ....
</map> ← fechar a tag

0

An example of how you can do it without needing JS just with CSS. In the case are two images, one over the other, but when you can the mouse in the div the image that is over disappears and you can use the map of the image that is below. Au take the mouse from the image the other image appears again above.

Take the example:

Pass the 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>

Browser other questions tagged html html5 image maps

You are not signed in. Login or sign up in order to post.