Image map links not working in IE

This site is best viewed in a modern browser with JavaScript enabled.

Benjammin854

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

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

Hi there Benjammin854,

here is your code simplified somewhat...

[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
[color=red]<!-- this is for testing and can be removed -->
<base href="http://www.benjamincook1.com/">[/color]
<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>
[/color]

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. :eek:
Normal links could definitely have been used for this layout.

coothead

Benjammin854

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

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

Benjammin854

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

Hi there Benjammin854,

Firefox and Chrome, I believe incorrectly, rendered this code...

[color=navy]   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"
[/color]

IE, I believe correctly, will only render this...

[color=navy]   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"
[/color]

coothead