CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Friedpanseller
Friedpanseller

Reputation: 699

Javascript Hover over visible part of PNG image

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

img1

Each section is it's own image with a transparent background like:

img2

So basically I want the opacity of each region to be 1 when it is hovered, and the opacity to be 0.5 when not hovering over it. Therefore the user can see which region is being hovered over.

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

Upvotes: 5

Views: 2845

Answers (3)

Dennis C
Dennis C

Reputation: 24747

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

  1. Load your layers into many hidden canvas.
  2. monitor the mouse cursor relative position of the base image.
  3. check if the same pixel by position offset is white or not white on each canvas.
  4. toggle opacity accordingly

challenges

  • performance
  • also support touch and hover-less devices

Upvotes: 0

Raja C
Raja C

Reputation: 159

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>

Upvotes: 0

Mayur Patel
Mayur Patel

Reputation: 1751

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

You can take image and you will get cords for each poly by using some image tool like photoshop etc and you can handle each hover event for specific region in area tag for Image.

Simply its easy to use and to make clickable map.

Upvotes: 4

Related Questions