Image map help?

Chris Hick

10-20-2010, 11:55 PM

So, I decided to do a page using CSS and I needed the use of an image map. Well, I created on, or so I think, but it is not working.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cyrus</title>
<style type="text/css">
#container {
width: 900px;
color: white;
}

#header {
width: 900px;
height: 160px;
background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername-1.png);
}
#leftnav {
float: left;
width: 200px;
height: 400px;
position:relative;
background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/leftnav.png);
}
#body {
width: 900px;
height: 400px;
background-color: black;
}

div#photo {

width: 200px;

height: 400px;

position: relative;

background-image: url(images/fruity_cones.jpg);

background-repeat: no-repeat;

}

div#photo ul {

margin: 0;

padding: 0;

list-style: none;

}

#photo a {

position: absolute;

width: 190px;

height: 42px;

text-indent: -1000em;
}
div#photo .forum a {

top: 36px;

left: 7px; }

#footer {
clear: both;
background-color: black;
width: 900px;
}

</style>

</head>

<body bgcolor="black">
<div align="center">
<div id="container">
<div id="header"></div>
<div id="leftnav"></div>
<div id="body">
<div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"></div></div>
<div id="photo"> <ul>

<li class="forum"><a href="http://www.roleplayandwritinghaven.com/forum.htm" title="R&W Haven Forum">R&W Haven Forum</a></li>

</ul>

</div>

<div id="footer">This page is brought to you by Roleplay and Writing Haven.</div>
</div>
</body>

</html>

^this is the code. What am I doing wrong??

dudeshouse

10-21-2010, 12:48 PM

There is no code for an image map in there. Is that what you really mean? An image map is links on certain parts of an image...

coothead

10-21-2010, 04:24 PM

Hi there Chris Hick,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Cyrus</title>

<style type="text/css">
body {
background-color:#000;
}
#container {
width:900px;
margin:auto;
color:#fff;
}
#header {
height:160px;
background-image:url(http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername-1.png);
}
#leftnav {
float:left;
width:194px;
height:364px;
padding:36px 0 0 6px;
margin:0 0 50px;
background-image: url(http://i732.photobucket.com/albums/ww329/Chrishick/leftnav.png);
list-style-type:none;
}
#leftnav a {
display:block;
width:190px;
height:42px;
text-indent:-9999px;
outline:none;
}
#a1 {
margin-bottom:104px;
}
#a2 {
margin-bottom:105px;
}
#right {
float:right;
width:466px;
height:320px;
background-image:url(http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png);
}
#footer {
clear:both;
text-align:center;
}
</style>

</head>
<body>

<div id="container">

<div id="header"></div>

<ul id="leftnav">
<li><a id="a1" href="http://www.roleplayandwritinghaven.com/forum.htm" title="R&W Haven Forum">R&W Haven Forum</a></li>
<li><a id="a2" href="http://www.roleplayandwritinghaven.com/" title="R&W History">R&W History</a></li>
<li><a href="http://www.roleplayandwritinghaven.com/" title="R&W 7 Elders">R&W 7 Elders</a></li>
</ul>

<div id="right"></div>

<div id="footer">This page is brought to you by Roleplay and Writing Haven.</div>

</div>

</body>
</html>

coothead