This is my first site and my knowledge is limited. On the page I am wanting a row of thumbnails that when clicked a larger version appears in a box above. Someone suggested I need a javascript function to swap the source of the big picture. I have no clue where to begin.
Image of the site in progress
Below is the code if that will help.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Natural Beauties by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../page 4/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
color: #831B1C;
}
-->
</style></head>
<body>
<div id="header">
<div id="logo">
<h1 align="left">walters' Photography </h1>
<h2> </h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">Blog</a></li>
<li><a href="#" accesskey="3" title="">Photos</a></li>
<li><a href="#" accesskey="4" title="">About</a></li>
<li><a href="#" accesskey="5" title="">Contact</a></li>
</ul>
</div>
</div>
<div id="gallery">
<div id="top-photo">
<h2>japanese gardens (springfield,Mo)</h2>
<p><a href="#"><img src="../page 4/images/img09big.jpg" alt="" width="700" height="299" /></a></p>
</div>
<div id="recent-photos"><span id="thumbs"><a href="#"><img src="../page 4/images/img05.jpg" alt="" width="95" height="84" /></a><a href="#"><img src="../page 4/images/img06.jpg" alt="" width="95" height="84" /></a><a href="#"><img src="../page 4/images/img07.jpg" alt="" width="95" height="84" /></a><a href="#"><img src="../page 4/images/img08.jpg" alt="" width="95" height="84" /></a><a href="#"><img src="../page 4/images/img09.jpg" alt="" width="95" height="84" /><img src="../page 4/images/img10.jpg" alt="" width="95" height="84" /></a></span></div>