I am looking to create a changeable image similar to how it is done in this thread Pure CSS Image Gallery with mouse click
Here is the layout of my page. I would like for the image to be shown in the frame that I have given it and then when I click on the button the image associated with that button will load in the frame.
[img]http://photos-c.ak.fbcdn.net/hphotos-ak-snc3/hs441.snc3/25344_322411658299_505568299_3517179_1276620_n.jpg[/img]
Here is my html code for my page, less the image code
<!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 id="Head1" runat="server">
<title></title>
<link href="../StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="../menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="headerleft">
<div class="chapter">Chapter Title</div>
<div class="section">Sub-Chapter Title</div>
</div>
<div class="headerright">
<div class="maintitle">Main Title</div>
<div class="subtitle">Sub Title</div>
</div>
<!-- #include file ="../menu.aspx" -->
<div class="text"></div>
<div class="graphics"></div>
<div class="navigation">
<a href="1131.aspx">
<img class="navbutton" src="../Nav_Images/left_arrow.png" alt="Previous" /></a>
<a href="#">
<img class="navbutton" src="../Nav_Images/home.png" alt="HOME" /></a>
<a href="#">
<img class="navbutton" src="../Nav_Images/right_arrow.png" alt="Next" /></a>
</div>
</body>
</html>CSS code for page layout
body {
background-color: #FFF;
}
div.headerleft {
float: left;
width:40%;
border:3px solid #CCC;
min-width: 350px;
margin-left:-3px;
clear: left;
}
div.chapter
{
border-bottom:3px solid #CCC;
color: #000;
padding: 10px;
text-align: left;
}
div.section {
border-top:3px solid #CCC;
margin-top: -3px;
color: #000;
padding: 10px;
text-align: left;
}
div.headerright {
float: left;
width: 59%;
height: 83px;
border: solid 3px #CCC;
min-width: 350px;
margin-left: -3px;
clear: right;
}
div.maintitle {
color: #000;
padding: 10px;
text-align: left;
}
div.subtitle {
color: #000;
padding: 10px;
text-align: left;
}
div.text {
float: left;
width: 25%;
border: solid 3px #CCC;
margin-left: -3px;
color: #000;
overflow:auto;
height: 500px;
clear: left;
min-width: 200px;
}
div.text1 {
color: #000;
padding: 10px;
overflow: auto;
}
div.graphics {
float: left;
width: 74%;
border: solid 3px #CCC;
margin-left: -3px;
overflow: auto;
height: 500px;
clear: right;
}
div.image {
color: #000;
padding: 10px;
text-align: center;
margin: auto;
border: solid 1px #000;
}
div.navbutton
{
clear: left;
float: right;
width: 30px;
height: 30px;
}
div.navigation
{
float: right;
margin-top: -3px;
}
a img
{
border: 0;
padding: 3px;
margin-top: 2px;
margin-right: 5px;
}