PDA

View Full Version : dreamweaver image map


marcia
10-12-2007, 04:58 PM
Creating page using dreamweaver 8. Have inserted some gif files created in photoshop and illustrator. One gif has 17 images on it.

In dream. I created an html page and a template of the same page, leaving space for an image to be placed. I then created the map and linked the hotspot to a jpeg image, and tried both.

The result on both was when I previewed in the browser, the images did not show up, only their descriptions.

The following is the html for the page: (can anyone tgell me what's wrong?)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>best logo-book page</title>
<style type="text/css">
}
#Layer1 {
position:absolute;
width:305px;
height:42px;
z-index:1;
left: 153px;
top: 14px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer4 {
position:absolute;
width:169px;
height:57px;
z-index:3;
top: 6px;
left: 196px;
}
.style3 {
font-size: 45px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #CC99FF;
}
#Layer5 {
position:absolute;
width:204px;
height:275px;
z-index:2;
left: 171px;
top: 81px;
}
#Layer6 {
position:absolute;
width:200px;
height:115px;
z-index:4;
left: -48px;
top: 132px;
}
#Layer7 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 356px;
top: 14px;
}
#Layer8 {
position:absolute;
width:204px;
height:31px;
z-index:1;
left: 1px;
top: 282px;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
color: #99CCFF;
}
</style>
</head>

<body>
<div id="Layer6"></div>
<div id="Layer7"><img src="/susan web/Book Cover Scans/images/best-book-arrangement-1-cop.gif" alt="books" width="344" height="581" border="0" usemap="#books" />
<map name="books" id="books"><area shape="rect" coords="150,388,222,444" href="/susan web/Book Cover Scans/heart dis 275.html" />
</map></div>
<div class="style3" id="Layer4">e d i t s </div>
<div id="Layer5">
<div class="style4" id="Layer8"></div>
</div>
<div id="Layer2"></div>
<img src="/susan web/Book Cover Scans/best-book-arrangement-1-cop.gif" alt="logo" width="287" height="580" />
</body>





</html>

Cary
10-12-2007, 11:05 PM
One thing you can do is remove the extra closing brace you have here directly beneath your opening style tag.

<style type="text/css">
}
#Layer1 {

Also, use "%20" whenever you have spaces in your paths. Though it's better not to use spaces at all.

<img src="/susan%20web/Book%20Cover%20Scans/best-book-arrangement-1-cop.gif" alt="logo" width="287" height="580" />