Image map links not working in IE

**Benjammin854** · 10-31-2012, 12:01 PM

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.

**tracknut** · 10-31-2012, 01:36 PM

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

**coothead** · 10-31-2012, 02:35 PM

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

**Benjammin854** · 10-31-2012, 05:51 PM

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.

**Benjammin854** · 10-31-2012, 06:30 PM

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!

**coothead** · 10-31-2012, 06:36 PM

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

**Benjammin854** · 10-31-2012, 06:28 PM

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

Thread: Image map links not working in IE

Thread Tools

Display

Hybrid View

Image map links not working in IE

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions