HTML Forum

**@SickFooDino** · 11-18-2011, 12:55 PM

For some reason It has always worked but here my site

www.team-illuminate.com

see the facebook & youtube images, they are both image mapped but for some reason it doesn't work?

here is my source code

*IGNORE THE OK's YOU SEE* lol i just left it ;b

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Team Illuminate</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
.style1 {color: #FF0000}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
    <div id="page-background"><img src="http://team-illuminate.com/testpng.png" alt="Smile" width="100%" height="100%" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="293,147,343,203" href="http://www.facebook.com/TEAMILLUMINATE" target="_blank" alt="Team Illuminate On Facebook">
<area shape="rect" coords="344,149,399,202" href="http://youtube.com/xteamilluminatex" target="_blank" alt="Team Illuminate On Youtube">
</map></div>
    
    <h2 class="style1">OK OK OK OK</h2>
    <p class="style1">OK OK OK OK  </p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <center><iframe width="500" height="339" src="http://www.youtube.com/embed/FnLWpV4a69c?rel=0" frameborder="0" allowfullscreen></iframe></center>
</body>
</html>

**Kelpie** · 06:56 AM

It does work... if you resize your browser window to approx 700 x 440 px

.

The problem is that the area coordinates are fixed (pixel) positions, while the map is fluid (%) height and width.
I don't think you can get an image map to work with percentage coordinates, so the only solutions I can see would be to either:

1. make the image map fixed width & height
or
2. use js to detect the window width & height, and to convert percentage coordinates to pixel coordinates accordingly

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!