8

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.

Nirmal
  • 9,391
  • 11
  • 57
  • 81

6 Answers6

7

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.

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • Thank you. That shows me some path to proceed. Let me wait and see if I could get any more answer. – Nirmal Apr 22 '10 at 09:43
  • This is likely your best bet. Decreasingly good ideas include a) layering transparent divs over the non-transparent portion of the image and adding the click event to those divs; and b) using Flash, but that should be a last resort. – Justin Johnson Apr 22 '10 at 19:34
  • As you said, I ended up using the classic image maps. Couldn't find any other good method to handle it without flash. My client's website will be behind a relatively slower connection, so had to crush every kilobyte out from the code. Thanks! – Nirmal Apr 23 '10 at 18:24
3

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.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
1

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

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

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
0

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.

Kyle
  • 65,599
  • 28
  • 144
  • 152
-1

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
YOU
  • 120,166
  • 34
  • 186
  • 219
  • Why **click** events? How do you, in Flash, determine which portions of the image are transparent so you know where to put events? – Quentin Apr 22 '10 at 08:53
  • @David, In flash if you attach click event on image, it can be done only on non-transparent. I just don't have example to show now, but surely I've done and seen others before. – YOU Apr 22 '10 at 08:55
  • How are click events going to help detect when the mouse moves over the non-transparent areas? – Quentin Apr 22 '10 at 08:58
  • @David, You know, Flash can write codes inside each object like Images, and images can be png or gif, flash understand transparency of images, and putting click event inside images can only hook the part that visible. Well, I understand Its hard to make sense without seeing an example. – YOU Apr 22 '10 at 09:05
  • Looks like OP just mentioned that he don't want to use flash, so may be I will do when there is chance. – YOU Apr 22 '10 at 09:09