School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,483
  • Replies: 826,138
  • Topics: 137,481
  • Snippets: 4,420
  • Tutorials: 1,148
  • Total Online: 1,779
  • Members: 77
  • Guests: 1,702

Welcome to Dream.In.Code
Become an Expert!

Join 300,483 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,779 people online right now. Registration is fast and FREE... Join Now!




Image Map in Internet Explorer Problem

 

Image Map in Internet Explorer Problem
Arbitrator

28 Oct, 2005 - 12:07 PM
Post #1

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 498



Thanked: 17 times
My Contributions
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?

HTML
<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:
IPB Image

Note: The HTML character entities refer to Japanese characters.

User is offlineProfile CardPM
+Quote Post


supersloth

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 01:34 PM
Post #2

serial frotteur - RUDEST MEMBER ON D.I.C.
Group Icon

Joined: 21 Mar, 2001
Posts: 21,521



Thanked: 41 times
Dream Kudos: 2147483647
Expert In: being gentlemanly

My Contributions
do you have a link to the page your using it on?
User is offlineProfile CardPM
+Quote Post

Arbitrator

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 01:48 PM
Post #3

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 498



Thanked: 17 times
My Contributions
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.

HTML
<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"/>
User is offlineProfile CardPM
+Quote Post

supersloth

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 02:07 PM
Post #4

serial frotteur - RUDEST MEMBER ON D.I.C.
Group Icon

Joined: 21 Mar, 2001
Posts: 21,521



Thanked: 41 times
Dream Kudos: 2147483647
Expert In: being gentlemanly

My Contributions
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?
User is offlineProfile CardPM
+Quote Post

Arbitrator

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 06:28 PM
Post #5

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 498



Thanked: 17 times
My Contributions
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.
User is offlineProfile CardPM
+Quote Post

Amadeus

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 06:44 PM
Post #6

g++ -o drink whiskey.cpp
Group Icon

Joined: 12 Jul, 2002
Posts: 13,260



Thanked: 147 times
Dream Kudos: 25
My Contributions
QUOTE(Arbitrator @ Oct 28 2005, 10:25 PM)
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.
User is offlineProfile CardPM
+Quote Post

Arbitrator

RE: Image Map In Internet Explorer Problem

28 Oct, 2005 - 07:17 PM
Post #7

D.I.C Regular
Group Icon

Joined: 26 Jan, 2005
Posts: 498



Thanked: 17 times
My Contributions
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.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 04:04AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month