Hover Only On Non-transparent Part Of Image

Is there any way to make only a non-transparent portion of an image to trigger mouse-over event? If the mouse travels to the transparent area, the mouse-out should be triggered and

Solution 1:

You can use an image with the old-fashioned <map> and <area> tags. An area tag can trigger javascript mouse events (an example use is this jQuery plugin: jQuery maphilight). However, there is no good way to create the map dynamically - you'll have to do it manually, or call a server-side service to map it.

Solution 2:

ImageMapster looks to be a good easy way to get image area maps working cross browser (IE6+, requires jQuery).

Another option would be to use raphael.js which creates SVG vector images that are translated to work in everything from IE6 upwards (everything except the stock browser in some old Android phones, I believe). They can be controlled using javascript in all sorts of ways and can have all the standard events e.g. mouseover, click, etc.

Raphael works better here than the Flash option in that it doesn't rely on Flash. It's less simple than the area map option and has a steep learning curve, but, for complex cases and dynamically changing shapes, it brings the additional benefit of a wide range of ways to control the vector images you create.

Solution 3:

You could map out where the transparent portions of the image are (given this chroma-key example, I expect you could do this in client side code in some browsers) and then compare the position of the event on a mousemove event to see if the pointer is over the transparent portion or not. Then you just need to add a variable to track if it was over that portion last time you checked or not.

Solution 4:

As far as I know, not possible so far to detect the transparent portion of an image.

Solution 5:

You could make a child div with a fixed height to the approximate size of the transparent area, absolutely positioned over it with blank background and border, then add your scripts to acitvate that div, or content within the div.