...
PDA

Issues with image maps and FF

canadianjameson
10-31-2007, 09:56 PM
Hi,

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">
<html>
<head>
<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">

</head>

<body>
<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);">
</map>
<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>
<div id="link1">&nbsp;</div>
<div id="link2">&nbsp;</div>
<div id="link3">&nbsp;</div>
<div id="link4">&nbsp;</div>
</div>
</body>
</html>



Thanks
zro@rtv
11-01-2007, 06: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?
http://www.alistapart.com/articles/sprites
http://www.alistapart.com/articles/imagemap/

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.)
canadianjameson
11-01-2007, 03: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
abduraooft
11-01-2007, 04: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 {
/*top:-65px*/
margin-top:-65px;
float:right;
} ??

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum