Hover only on non-transparent part of image

Question

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 the script should listen for any mouse-over event on a layer underneath the image.

Is it possible? Thanks for any input.

Edit: I am looking to do this without using flash.

Answer 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.

Answer 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.