Hello,
I am making a photo gallery and I have a bunch of photos that are organized by month. I would like a user to choose a date from a drop-down menu on the left side of a page and then the div in the middle of the page will display the images for that month. I have done this in the past with Frames but I don't want to use frames- Can I achieve this with out frames?
here is my code:
here is the CSS
I am making a photo gallery and I have a bunch of photos that are organized by month. I would like a user to choose a date from a drop-down menu on the left side of a page and then the div in the middle of the page will display the images for that month. I have done this in the past with Frames but I don't want to use frames- Can I achieve this with out frames?
here is my code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>xxxxxxxx</title>
<link href="PhotoStyle.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style3 {
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #006666;
}
-->
</style>
</head>
<body onLoad="MM_preloadImages('Images/company.gif','../../Images/navMenu/Ohome.gif','../../Images/navMenu/Ocompany.gif','../../Images/navMenu/Oportfolio.gif','../../Images/navMenu/Opress.gif','../../Images/navMenu/Oaffiliations.gif','../../Images/navMenu/Ocontact.gif','../../Images/navMenu/Ologin.gif')">
<div class="Wrapper">
<!-- Main Banner -->
<div id="HeadBanner">
<img src="../../Images/headBanner.png" width="964" height="128" alt="">
</div>
<!-- END Main Banner -->
<!-- Begin of Navigation Div Bar -->
<div class="NavBar">
<center>
<ul>
<li><a href="../../index.html">HOME</a></li>
<li><a href="addLog.html">ADD LOG</a></li>
<li><a href="addLog.html">PHOTO'S</a></li>
</ul>
</center>
</div>
<!-- End Nav bar -->
<!-- This is where the user chooses a month to view the images - it will stay the same -->
<div id="DateMenu">
<span>
<p>December</p>
<form name="jump1">
<select name="myjumpbox" OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
<option value="#" selected>DECEMBER</option>
<option value="2009/December/Dec04Pics.html">December 04</option>
</select>
<hr>
<p>June</p>
<select name="myjumpbox1" OnChange="location.href=jump1.myjumpbox1.options[selectedIndex].value">
<option value="#" selected>JUNE</option>
<option value="2009/June/062609/June26Pics.html">June 26</option>
</select>
</form>
<hr>
</span>
</div>
<!-- Thumnails go here- this container needs to update depending on which month the user chooses -->
<div id="mainPics">
Thumnails go here.
</div>
</body>
</html>here is the CSS
Code:
.Wrapper{
width:964px;
margin:0px auto;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.NavBar ul li {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display: inline;
padding-right:10px;
}
.NavBar ul li a {
color:#336666;
text-decoration:none;
font-size:15px;
}
.NavBar a:hover {
color:#009999;
text-decoration:underline;
}
.mainPic{
position:relative;
top:30px;
margin:0px auto;
width:450px;
}
#DateMenu{
position:relative;
top:30px;
float:left;
width:200px;
height:500px;
background-color:#CCCCCC;
}
#mainPics{
position:relative;
padding-left:200px;
float:left;
top:30px;
width:560px;
height:500px;
background-color:#999999;
}