Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Issues with image maps and FF

    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

    Code:
    <!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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.)
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Your #text is covering the #map links.
    The below one will fix it in FF, but I'm not sure about IE's behavior.
    Code:
    #text {
    /*top:-65px*/
    margin-top:-65px;
    float:right;
    }
    ??
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •