Hover over the opaque part of the image.

Question

Is there a way to make only the opaque part of the image to trigger the mouse event?

If the mouse moves to a transparent area, turning off the mouse should start, and the script should listen for any mouse event above the layer below the image.

Is it possible? Thanks for any input.

Edit: I'm looking to do this without using a flash.

Answer 1

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

Answer 2

ImageMapster looks like a good way to get a cross-browser image area map (IE6 +, jQuery required).

Another option is to use raphael.js , which creates SVG vector images that are translated to work in everything from IE6 up (everything except the stock browser on some old Android phones, I think). They can be controlled using javascript in various ways and can have all standard events, for example. mouseover, click, etc.

Raphael works better than the Flash version because it does not rely on Flash. It is less simple than the area map option and has a steep learning curve, but for complex cases and dynamically changing forms, it brings additional benefits from a wide range of ways to control the generated vector images.

Answer 3

You can indicate where the transparent parts of the image are located (given this color key , I expect you can do it in client code in some browsers), and then compare the position of the event in the mousemove event to see if the pointer is above the transparent part or not. Then you just need to add a variable to track if it was in that part the last time you checked or not.

Answer 4

As far as I know, it is not yet possible to detect the transparent part of the image.

Answer 5

You can make a child div with a fixed height up to the approximate size of the transparent area absolutely above it with an empty background and border, and then add your own scripts to accept this div or content in the div.

Answer 6

Maybe if you use Flash .

Some tips here

• load a disproportionate image using Flash, write click event handlers inside flash memory (and transfer it to javascript when clicked)
• load flash object with transparent flag
• set the object or embed the tag in a very large zIndex, like 9999, or something that will make it on top