View Full Version : Issues with image maps and FF

10-31-2007, 10:56 PM

I was wondering, are there any known issues with images maps and differences in coordinates in FF vs IE?

I ask because I'm trying to use an image map for the following application and it works in IE but the clickable area isn't where it's supposed to be in FF

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="js/Animator.js"></script>
<script type="text/javascript" src="js/BorderFade.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css">


<div id="mainHome"><img src="images/test4flat.jpg" usemap="#Map">
<map name="Map">
<area id="video" shape="rect" coords="12,397,203,460" href="video.htm" target="_self" alt="Video Reel" onmouseover="zxcAnimator('opacity',this,50,100,'linear',625);" onmouseout="zxcAnimator('opacity',this,100,50,'linear',625);">
<area id="film" shape="rect" coords="247,397,417,461" href="film.htm" target="_self" alt="Film Reel" onmouseover="zxcAnimator('opacity',this,50,100,'linear',625);" onmouseout="zxcAnimator('opacity',this,100,50,'linear',625);">
<div id="text">
<span onmouseover="zxcBorder('border-Right',link1,1000,'#FFFFFF','#000000','solid #000000 1px');" onmouseout="zxcBorder('border-Right',link1,1000,'#FFFFFF','#FFFFFF','solid #FFFFFF 1px');">JOSEPH BARON</span><br>
<span onmouseover="zxcBorder('border-Right',link2,1000,'#FFFFFF','#000000','solid #000000 1px');" onmouseout="zxcBorder('border-Right',link2,1000,'#FFFFFF','#FFFFFF','solid #FFFFFF 1px');">514.805.6585<br></span>
<span onmouseover="zxcBorder('border-Right',link3,1000,'#FFFFFF','#000000','solid #000000 1px');" onmouseout="zxcBorder('border-Right',link3,1000,'#FFFFFF','#FFFFFF','solid #FFFFFF 1px');">resume<br></span>
<span id="email" onmouseover="zxcBorder('border-Right',link4,1000,'#FFFFFF','#000000','solid #000000 1px');" onmouseout="zxcBorder('border-Right',link4,1000,'#FFFFFF','#FFFFFF','solid #FFFFFF 1px');">josephbaron@gmail.com</span>
<div id="link1">&nbsp;</div>
<div id="link2">&nbsp;</div>
<div id="link3">&nbsp;</div>
<div id="link4">&nbsp;</div>


11-01-2007, 07:08 AM
I know im being lame by replying without truly parsing yr code, but...

Have you considered using more modern techniques rather than image maps?

Also, I'd advise against the inline JS.

(again apologies for not actually answering the question at hand, ill look into it further if i get a sec.)

11-01-2007, 04:57 PM
you can now see it in FF here: www.enviromark.ca/baron/index.htm

I'll have a look at the other options when i get home from class (yay, accounting :/

I may just chop the image... it may end up being easier. I don't have much time these days and it's just a page for my neighbor to post his film resume on

11-01-2007, 05:47 PM
Your #text is covering the #map links.
The below one will fix it in FF, but I'm not sure about IE's behavior.

#text {
} ??