CSS Image Gallery - DEFAULT IMG

Question

Not really a DW question but as I've had no replies on the appropriate forum, I thought I'd ask you guys for some help.
I'm using   http://www.dynamicdrive.com/style/cs...e-gallery/P30/ but am unsure how to position a default image in the space where the enlarged img goes.
At the moment I have a large white space when none of the thumbnails are being activated.
Many thanks for any help.
Paul
CSS
.gallerycontainer{
position: relative;
width:780px;
height:auto;
margin-left:260px;
margin-top:100px;
border:1px solid #999999;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
padding:3px 7px 3px 7px;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid #E6E6E7;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
HTML
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br /> Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T3.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L3.jpg" width="500" height="333" /><br />
Sushi for dinner anyone?</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T4.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L4.jpg" width="500" height="333" /><br />
Run wild with horses.</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T1.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L1.jpg" width="500" height="333" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="WHITE/images/T2.jpg" width="100" height="67" border="0" /><span><img src="WHITE/images/L2.jpg" width="500" height="333" /><br />So real, it's unreal. Or is it?</span></a>
</div>

Answer 1

Change this -
<div class="gallerycontainer">
to this -
<div class="gallerycontainer">
<div style="position:absolute; left: 270px; z-index: 40;"><img src="your_default_image"></div>