ImageMapster not rendering some areas in Internet Explorer only

StackOverflow https://stackoverflow.com//questions/11713938

Question

I'm using ImageMapster to generate fills and outlines around image map areas, it's giving me problems with IE not displaying something that chrome, safari, Firefox have absolutely no problem with.

http://sa-neighborhoodsustainability.org/map1a.php

when opening the above link in IE, there are 2 areas that remain white. these are areas that overlap a larger area, and are excluded from it with a repeat of the area and a nohref tag along with sharing the same name as the larger area.

Does anyone have an ideas?

Thanks

Was it helpful?

Solution

It looks like there are a couple things at play here. First - when I open that link in IE9 it renders in "quirks" mode. Your HTML has no DOCTYPE, HTML or BODY tags. HTML5 technically allows you to omit HTML, HEAD and BODY, though it still freaks people like me out to see that. However it does NOT allow you to omit the DOCTYPE tag. It seems that IE9 defaults to quirks mode when there's no DOCTYPE so you should start by adding that:

<!doctype html>

That should solve the IE9 problem.

This same issue will still show up in IE6-8. However, this is due to limitations of those browsers when using areas within areas.

There is an option called fillColorMask which lets you specify the fill color to use for interior areas for IE6-8 since masks don't really work. I apologize because I just now realized this is not really documented. In your case, you should set 

fillColorMask: '8CAD5A'

for the left area, and 

fillColorMask: '99BA67'

for the right area (these colors match the color that they are filled with already, so it should cause nothing to appear to happen to them).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top