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

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

Answer 2

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.

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

Answer 4

Its possible, if you use Flash.

Few tips here

• load unproportional image using Flash, write click event handlers inside flash, (and pass it to javascript when clicked)
• load the flash object with transparent flag
• set the object or embed tag to very big zIndex like 9999 or something to make it on the top

Answer 5

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.