[Arbitrator]

I'm using the below image map but it's not working in Internet Explorer 6.0 SP2 as this page says it should. It works fine in Firefox 1.7 though. Any ideas why this might be?

<map name="signature">
<area shape="rect" coords="190,10 319,22" title="Just Some Guy (JSG)"/>
<area shape="rect" coords="47,51 220,82" title="&#19981;&#24605;&#35696;&#12394;&#30007; :: fushigi na otoko :: mysterious guy"/>
<area shape="rect" coords="30,111 241,207" title="Which Naruto character are you?" target="_blank" href="http://www.naruto-kun.com/character+test.html"/>
</map>

<img height="250" width="500" border="0" usemap="signature" alt="JSG Signature Image" title="JSG Signature Image" src="JSG Signature 001B.png"/>

The Image:


Note: The HTML character entities refer to Japanese characters.

[supersloth]

do you have a link to the page your using it on?

[Arbitrator]

I don't since I was viewing the image locally from my hard drive. I've modified the code slighty: copy the below into Notepad, name the file "page.html," and you'll have a working example. The Japanese <title> characters might appear as gibberish though if you don't have the language installed.

<map name="signature">
<area shape="rect" coords="190,10 319,22" title="Just Some Guy (JSG)"/>
<area shape="rect" coords="47,51 220,82" title="不思議な男 :: fushigi na otoko :: mysterious guy"/>
<area shape="rect" coords="30,111 241,207" title="Which Naruto character are you?" target="_blank" href="http://www.naruto-kun.com/character+test.html"/>
</map>

<img height="250" width="500" border="0" usemap="signature" alt="JSG Signature Image" title="JSG Signature Image" src="http://i10.photobucket.com/albums/a117/PLGaries/JSGSignature001B.png"/>

[supersloth]

hrm, i just noticed this but your image is a png. IE does not fully support PNG, does it work if you try it as a jpg?

[Arbitrator]

Internet Explorer has no compatibility problems with PNG. I should have mentioned that I'd already done an image format test with the image maps prior to posting here.

It seems I've found the problem though. Internet Explorer requires that a hash character precede the image map name in the usemap attribute. In this case <img usemap="#signature"/>. Seems like one of those trivial things like the underscore character in <a target="_blank"></a>. In addition, I find another browser inconsistency: in the case of image map <area> tags, Internet Explorer places priority on alt attributes over title attributes for mouseover tooltips; the opposite of what it does for images. And while the image map works in Firefox without the preceding hash character, Firefox ignores all alt (but not title) tags without it.

Coding is such a pain sometimes, heh.

[Amadeus]

Arbitrator, on Oct 28 2005, 10:25 PM, said:

Internet Explorer has no compatibility problems with PNG.

That's a bit of a broad statement...IE versions before 6 have several compatability problems with the png format. Even the 5.5 release only supported transparent layers by way of a fairly shoddily coded filter setup.

[Arbitrator]

Heh, looks like I should have rephrased that since I was speaking as it pertains to image maps (though I didn't account for version issues). That would explain why I was never able to get PNG transparency to work though. (I tried it as an alternative to GIF before Firefox was first released and always got a gray background so I went back to GIF.) I checked out this webpage for more information on that and found that the PNG transparency problem occurs on the latest version of Internet Explorer 6.0 too.