• The VOIDRUNNER'S CODEX is LIVE! Explore new worlds, fight oppressive empires, fend off fearsome aliens, and wield deadly psionics with this comprehensive boxed set expansion for 5E and A5E!

HTML Image Map won't work in IE

I

Ilium

First Post
Ok, calling all HTML gurus. I'm trying to use an image map in a page I'm working on. It works fine in Firefox, but under IE the image is not clickable. I've put my code in the spoiler below. The javascript call I'm making isn't relevant (I don't think) because the areas aren't links at all. I tried changing it to just a regular URL as a test and it made no difference.

[SBLOCK]
Code: 
<html>
<head>
</head>
<body>
 <map name="cave_image_map">
 <area shape="circle" coords="50,170,50" href="javascript:displayTiddler(this,'Cave Entrance',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="150,170,50" href="javascript:displayTiddler(this,'Chasm',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="225,165,35" href="javascript:displayTiddler(this,'Trapped Tunnels',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="220,295,50" href="javascript:displayTiddler(this,'Night Woods Kobolds',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="250,360,35" href="javascript:displayTiddler(this,'Garbage Cave',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="355,280,50" href="javascript:displayTiddler(this,'Root-Choked Cave',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="385,150,50" href="javascript:displayTiddler(this,'Pool Slide',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="510,185,35" href="javascript:displayTiddler(this,'Choker\'s Lair',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="665,185,60" href="javascript:displayTiddler(this,'Dragon\'s Chamber',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="725,290,50" href="javascript:displayTiddler(this,'Forgotten Treasure',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="500,45,50" href="javascript:displayTiddler(this,'Bubble Chamber',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="525,265,35" href="javascript:displayTiddler(this,'Fog and Death',DEFAULT_VIEW_TEMPLATE,true,false);">
 <area shape="circle" coords="565,375,60" href="javascript:displayTiddler(this,'Trapped by a Puddle',DEFAULT_VIEW_TEMPLATE,true,false);">
 </map>
 <img src="graphics/dragon_lair_small.jpg" usemap="cave_image_map" />
</body>
</html>
[/SBLOCK]
 

log in or register to remove this ad

Drawmack

Drawmack

First Post
I've always avoided using image maps. I find them more trouble then they are worth and they usually load very slowly. The couple of times where clients have forced image map style interfaces on me I have cut the image up and placed them in tables.

That being said I can't spot a problem off the top. Maybe try ening your area tags with /> to make them xhtml compliant. Another trick I have seen people us is just call a javascript routine as a link off the image and then based on where the person clicked, which you can grab with javascript, direct them as if you were using an image map.

Can you either zip up and attach the entire document so I can test it out myself, or point me to a URL where this document is uploaded?
 

Umbran

Umbran

Mod Squad
Staff member
Supporter
I don't know if this is causing your difficulty, but I'll mention it just in case:

With image maps, you have to be very careful that the regions don't overlap. For example, your first two circles seem to share a single point on their edges (100,170). If someone were to click on that exact point, the map wouldn't know which call to make. It might be invalidating the whole structure for that.
 

I

Ilium

First Post
@Drawmack: Excellent suggestion on the javascript approach. I'm actually doing this in the context of a TiddlyWiki, so there's a lot of JavaScript running around (but I did test the above in a bare HTML document by itself). I can add to it, though. I'll give this a shot if Umbran's suggestion doesn't pan out.

@Umbran: Good eye. I'll try massaging it to eliminate the overlapping areas and see if it helps. Otherwise I can go with Drawmack's suggestion which should work under any browser. Thanks.
 

Sir Brennen

Sir Brennen

Legend
Ilium,

The order of your Image and Map may be the problem for IE. It can be picky about things like that.

I have an image map which works fine in both browsers for my own Tiddlywiki. I originally used the same map on a standard HTML page. It's located here:

http://home.comcast.net/~joemoon5/tian/#Cosmology

Here's the HTML code behind it:
[sblock]
Code: 
<html>
 <div style="text-align: center;">
 <img usemap="#FPMap0" src="images/Planes.jpg" width="416" height="476" style="border: none;">
 <map name="FPMap0" usemap="#FPMap0" >
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Eleron" shape="rect" coords="179, 10, 281, 61">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Shadow" shape="rect" coords="184, 75, 235, 179">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Silver Realms" shape="rect" coords="279, 226, 407, 262">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Natia-Ran" shape="rect" coords="24, 12, 135, 47">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Natia-Ran" shape="rect" coords="296, 428, 406, 462">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlylink="Pranas" shape="rect" coords="10, 222, 55, 287">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlylink="Veyana" shape="rect" coords="70, 222, 110, 287">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlylink="Shula" shape="rect" coords="115, 222, 145, 287">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="The World" shape="circle" coords="211, 249, 62">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Elemental Planes" shape="rect" coords="120, 296, 170, 369">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Elemental Planes" shape="rect" coords="254, 300, 302, 372">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Elemental Planes" shape="rect" coords="121, 140, 168, 201">
 <area href="javascript:;" onclick="onClickTiddlerLink(event);" tiddlyLink="Elemental Planes" shape="rect" coords="251, 136, 295, 201">
 </map> 
</div>
</html>
[/sblock]
 

I

Ilium

First Post
That's great, Sir Brennen. I've been so swamped I haven't tried any of these ideas yet (yeah, I know, I'm a slacker). :)

I see you're using a different javascript call than I am, too. I wonder if that might help. What version is your TiddlyWiki?
 



Similar Threads

jasper
DDAL Jasper DMs Season 1
2
Replies
19
Views
2K
jasper
jasper
E
My White Whale: A True Exploration System (+)
Replies
7
Views
3K
Emberashh
E
Yaarel
D&D (2024) Make SPELL SCHOOLS Thematic (and Useful)
2 3 4
Replies
36
Views
5K
Yaarel
Yaarel
E
More Words of Chaos?
2 3
Replies
29
Views
4K
Beefermatic
Beefermatic
Abstruse
Freebies, Sales, and Charity Bundles for December 3, 2023
Replies
1
Views
6K
Juxtapozbliss
Juxtapozbliss

Voidrunner's Codex

Remove ads

Top