<!DOCTYPE html PUBLIC "-//W3C//DD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select Gifts For Friends </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#background {
position: relative;
height: 600px;
width: 900px;
}
#header {
position:absolute;
height:150px;
width:900px;
background:#6F3;
}
#selectgift
{
position:absolute;
height:50px;
width:900px;
top: 150px;
left: 0px;
background:#00C;
}
#pic1
{
position:absolute;
width:300px;
height:187.5px;
top:200px;
left:0px;
background:#FF0;
}
#pic2
{
position:absolute;
width:300px;
height:187.5px;
top:200px;
left:300px;
background:#F03;
}
#pic3
{
position:absolute;
width:300px;
height:187.5px;
top:200px;
left:600px;
background:#F0F;
}
#pic4
{
position:absolute;
width:300px;
height:187.5px;
top:387.5px;
left:0px;
background:#C6F;
}
#pic5
{
position:absolute;
width:300px;
height:187.5px;
top:387.5px;
left:300px;
background:#F90;
}
#pic6
{
position:absolute;
width:300px;
height:187.5px;
top:387.5px;
left:600px;
background:#966;
}
#footer {
position:absolute;
height:25px;
width:900px;
top: 575px;
left: 0px;
background:#C33;
}
-->
</style>
</head>
<body>
<div id="background">
<div id="header">A Header here </div>
<div id="selectgift">Select Gift Here !
<form name="form1">
<select name="category" onchange="displayPics()">
<option name = "choclates">choclates</option>
<option name="mugs">mugs</option>
<option name="teddy bears">teddy bears</option>
<option name="Wrist Bands">Wrist Bands</option>
</select>
</form>
</div>
<div id="footer">Copyright Galsky Social</div>
<!-- <div id="pic1"><img src="images/1.jpg" align="middle"/></div>
<div id="pic2"><img src="images/2.jpg" align="middle"/></div>
<div id="pic3"><img src="images/3.jpg" align="middle"/></div>
<div id="pic4"><img src="images/4.jpg" align="middle"/></div>
<div id="pic5"><img src="images/5.jpg" align="middle"/></div>
<div id="pic6"><img src="images/6.jpg" align="middle"/></div>
-->
<script type="text/javascript">
function displayPics()
{
alert("In function ");
var i = 1;
var a = document.form1.category.selectedIndex;
var img_src;
if(a == 1)
img_src = 'images/choclates';
else if(a == 2)
img_src = 'images/mugs';
else if(a == 3)
img_src = 'images/teddybears';
else
img_src = 'wristbands';
for (i = 1;i<7;i++)
{
document.write('<div id="pic');
document.write(i);
document.write('"><img src="');
document.write(img_src);
document.write('/');
document.write(i);
document.write('.jpg" align="middle"/></div>' );
}
</script>
</div>
</body>
</html>