Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement