1

Here is an example I've put together to better illustrate this problem:

http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html

When you go from image A area to image B area or reverse, there are locations where the rollover doesn't show because the image map below is covered with transparent area of rollover image. Is there a way to make the rollover image hidden from mouse? In ActionScript I could do this by setting an object's mouseEnable property to false to get it out of the way, but I don't know how I can do this in HTML/JavaScript.

The rollover image (pink) is absolute positioned with a higher z-index above the black & white image. The practical usage is for highlighting floorplans on a floorplate of a building whenever mouse rolls over a floorplan.

Thanks,

Saeid

Saeid
  • 11
  • 1

1 Answers1

0

I don't know if this would work for your situation, but an easy way to do it could be to make your black & white image partially transparent (instead of white) and put the pink image below it (that is, give it a lower z-index). Does that help at all?

Spiny Norman
  • 8,277
  • 1
  • 30
  • 55
  • I already did that. While it fixes this problem the result doesn't look as good since the main floorplate in my project is far more detailed than this example and when I put colored rollover behind transparent version of it, traces of white color appear around black lines and black text. Not good! :( – Saeid Feb 11 '11 at 11:20
  • Ah, then maybe you could try to use a PNG image instead of GIF for the floor plan; they have more than one transparent color (an alpha channel), so you can blend the floor plan onto the background. – Spiny Norman Feb 11 '11 at 11:37
  • I used PNG as well, but still the result isn't perfect. You can see a test here, though only the top left three floorplans are active. Notice the white area showing around text and some of the lines. http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test1/test1.html – Saeid Feb 11 '11 at 22:44
  • I see what you mean. The problem is, those pixels are now 100% opaque where they should be partially transparent. I think you can get this effect by drawing (in photoshop or gimp or what have you) with "transparency" as your secondary/background color. I'm not entirely sure though, as I'm not a designer. Bottom line is: you're doing it right, you just have to change your image :) – Spiny Norman Feb 14 '11 at 08:34