Irregular shape rollovers with Canvas and PNGMonday, June 10th, 2013 at 4:02 pm
Creating rollovers is easy. Much easier than it was in the past with the infamous MM_mouseover at least. It gets tricky though when you want to have the rollover only happen on a certain shape and not only in a rectangular area.
There are many solutions to this, like SVG masking or adding lots of rectangular overlays that make up the desired shape, but I wanted to have a simple solution. You can see the solution working here in this GIF:
What I am doing here is adding PNGs (courtesy Game Icons) with transparency to the HTML and give them a class of rollover:
<img src="bottle.png" alt="bottle vapours" class="rollover"> <img src="burning-embers.png" alt="burning embers" class="rollover">
The transparent part of the PNG will be what should not trigger the rollover, and all other pixels should.
- Loop over all images with the class “rollover”
- Add a mouseover, mouseout and mousemove event to each
- On mouseover, take the image and copy it to an invisible Canvas element
- On mousemove, find out the x and y position of the mouse cursor and read the colour of the pixel at this position from the canvas
- If the pixel has an opacity of 0, it is transparent, which means remove the “over” class from the image.
- If the pixel is not opaque, add the class “over” to the image.
You can try this out here.