All geek questions in one place

Javascript Hover over the visible part of a PNG image

Is there a way to check if the mouse is above the visible part of the PNG image?

img1

Each section represents its own image with a transparent background, for example:

img2

So basically I want the opacity of each area to be 1 when it hangs, and the opacity to 0.5 when it does not hang above it. Thus, the user can see in which area they are hung.

Is there something like onmouseover, if the mouse position on the image! = Is transparent, then ...

+5
source share
3 answers

Take a look at http://www.w3schools.com/tags/tag_area.asp

You can take an image and you will get cords for each poly using some image tool such as Photoshop, etc., and you can handle each hover event for a specific area in the area tag for the image.

Just easy to use and make an interactive map.

+3
source 
Take specific image in two copy.one before href link and next next href link images.. <script type='text/javascript'> $(document).ready(function() { $(".button").hover(function() { $(this).attr("src","button-hover.png"); }, function() { $(this).attr("src","button.png"); } ); } ); </script> <body> <img src="button.png" alt="My button" class="button" /> </body> </html>
0
source

It is programmed in HTML5 without any tools or manually creates <map> <area shape = poly coords = "325,25,262, ....>

  • Load layers into many hidden canvases.
  • Track the relative position of the mouse cursor on the base image.
  • check if the same pixel in position is a white or non-white offset on each canvas.
  • display opacity.

Problems

  • performance
  • also support touch and hover-less devices
0
source

Source: https://habr.com/ru/post/1234704/

More articles:


All Articles