www.webdeveloper.com
Results 1 to 7 of 7

Thread: Image map links not working in IE

  1. #1
    Join Date
    Jul 2012
    Posts
    10

    Image map links not working in IE

    Any help with this will be much appreciated.

    Ok, here's the situation. I have an image (Sample_front2.jpg) that has several clickable areas on it that go to outside websites. I use the img element together with the map element (see source code below). I've tested on Chrome and Firefox and I can click to the links, but on IE (I'm using IE9) I cannot click to them.

    Here is the relevant source code from my HTML document:

    <body>
    <header>
    <img src="contactbenjamin.jpg" alt="Contact Benjamin Heading."/>
    </header>
    <div id="bodycontent3">
    <img src="Sample_front2.jpg" width=700 height=390px alt="Picture Benjamin Cook Contact Info." border=0 usemap="#links">
    <map name="links">
    <area shape="rect" coords="40px,310px,345px,326px" href="mailto:benjamincook1@gmail.com" alt="email">
    <area shape="rect" coords="40px,325px,275px,350px" href="http://www.benjamincook1.com" target="_blank" alt="portfolio">
    <area shape="rect" coords="380px,285px,650px,300px" href="http://www.linkedin.com/in/benjamincook1" target="_blank" alt="linkedin">
    <area shape="rect" coords="380px,302px,625px,328px" href="http://www.twitter.com/benjamincook4" target="_blank" alt="linkedin">
    <area shape="rect" coords="380px,322px,625px,352px" href="http://www.facebook.com/benjamincook4" target="_blank" alt="linkedin">
    </map>
    <div id="button5">
    <a href="index.html">Return to homepage</a>
    </div>
    </div>
    </body>

    Any ideas for why IE is giving me such a problem? Here is the actual link to the page:

    http://www.benjamincook1.com/Contact%20Ben.html

    Check it out in Chrome and Firefox and you'll be able to click to each of the websites listed on the image (Twitter, Facebook, mailto:benjamincook1@gmail.com, www.benjamincook1.com). With IE however, you cannot access these links.

    Thank you.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,898
    IE doesn't take well to code errors, that's probably what's causing the issue. Check and fix your errors with the results of the validator, and see if that solves it.

    Dave

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460

    Post

    Hi there Benjammin854,

    here is your code simplified somewhat...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!-- this is for testing and can be removed -->
    <base href="http://www.benjamincook1.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>benjamincook1.com--experienced marketing professional.</title>
    
    <style type="text/css">
    body {
        background-image:url(background4.jpg);
        background-attachment:fixed;
     }
    #container {
        width:1000px;
        margin:auto;
     }
    #contact {
        display:block;
        width:1000px;
        height:190px;
        border-top:2px solid #000;
        border-bottom:2px solid #000;
     }
    #sample-fonts {
        display:block;
        width:700px;
        height:390px;
        border:0;
        margin:10px auto;
     }
    #return {
        float:right;
        width:260px;
        line-height:112px;   
        background-image:url(newbutton.gif);
        font-family:'trebuchet ms',helvetica,arial,sans-serif;
        font-size:15px;
        font-weight:bold; 
        color:#000;   
        text-align:center;
        text-decoration:none;
        text-shadow: 2.5px 2.5px 2px #808080;
     }
    </style>
    
    
    </head>
    <body>
    
    <div id="container">
    
     <img id="contact" src="contactbenjamin.jpg" alt="Contact Benjamin Heading.">
    
    <img id="sample-fonts" src="Sample_front2.jpg" usemap="#links" alt="Picture Benjamin Cook Contact Info."> 
      
    <map name="links">
     <area coords="40,310,345,326" href="mailto:benjamincook1@gmail.com" alt="email">
     <area coords="40,325,275,350" href="http://www.benjamincook1.com" alt="portfolio">
     <area coords="380,285,650,300" href="http://www.linkedin.com/in/benjamincook1" alt="linkedin">
     <area coords="380,302,625,328" href="http://www.twitter.com/benjamincook4" alt="linkedin">
     <area coords="380,322,625,352" href="http://www.facebook.com/benjamincook4" alt="linkedin"> 
    </map> 
    
    <a id="return" href="index.html">Return to homepage</a>
    
    </div>
    
    </body>
    </html>
    
    Personally, I would avoid using "position:absolute" - the bane of novice coders - for general layout purposes.
    Also "image-maps" should really be avoided wherever possible - image failure or text only browsers have no links.
    Normal links could definitely have been used for this layout.

    coothead

  4. #4
    Join Date
    Jul 2012
    Posts
    10
    Thanks coothead,

    Instead of just copying what you did (which probably I'll end up doing anyways), would it be possible for you to isolate what I did wrong in my markup and tell me specifically why it won't work in IE? Like a couple sentence answer? I think this would help me understand more going forward.

  5. #5
    Join Date
    Jul 2012
    Posts
    10
    Dave,

    Thanks for directing me to this validator - worked like a charm. I guess IE took issue with me specifying the coordinates with the letters "px" included for pixels. I omitted them and it worked!

    I will definitely use this tool again.

    Ben

  6. #6
    Join Date
    Jul 2012
    Posts
    10
    Coohead,

    I just figured it out thanks to Dave's reply (above). After going through the W3C validator, it told me I had errors on the lines where I specified the coordinates with "px" added for pixels. Apparently IE doesn't like the pixels designation? Anyways, I simply removed the "px" from each of the coordinates and now it works like a charm in IE. Thanks for your help at any rate!

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there Benjammin854,

    Firefox and Chrome, I believe incorrectly, rendered this code...
    Code:
       coords="40px,310px,345px,326px" 
       coords="40px,325px,275px,350px" 
       coords="380px,285px,650px,300px"
       coords="380px,302px,625px,328px" 
       coords="380px,322px,625px,352px"
    
    IE, I believe correctly, will only render this...
    Code:
       coords="40,310,345,326" 
       coords="40,325,275,350" 
       coords="380,285,650,300"
       coords="380,302,625,328" 
       coords="380,322,625,352"
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles