Making a default image

Is there a way I can make a default image with this photo gallery.

HTML:

<a href="#"><img src="images/adnlawthumb.jpg" alt="" class="thumb" /><span><img src="images/adnlaw.jpg" alt="" /></span></a>
<a href="#"><img src="images/ascthumb.jpg" alt="" class="thumb" /><span><img src="images/asc.jpg" alt="" /></span></a>
<a href="#"><img src="images/betterspecsthumb.jpg" alt="" class="thumb" /><span><img src="images/betterspecs.jpg" alt="" /></span></a>
<a href="#"><img src="images/coffeethumb.jpg" alt="" class="thumb" /><span><img src="images/coffee.jpg" alt="" /></span></a>
<a href="#"><img src="images/heartthumb.jpg" alt="" class="thumb" /><span><img src="images/heart.jpg" alt="" /></span></a>
<a href="#"><img src="images/r2ethumb.jpg" alt="" class="thumb" /><span><img src="images/r2e.jpg" alt="" /></span></a>


CSS:

#contentLeft a span {
display: none;
}

#contentLeft a:hover span {
display: block;
position: absolute;
width: 160px;
height: 120px;
top:40px;
left:425px;
border: 0;
}

Add an id one you want to be the default. e.g.
<a href="#" id="default"><img src="images/adnlawthumb.jpg" alt="" class="thumb" /><span><img src="images/adnlaw.jpg" alt="" /></span></a>
Then in your CSS do this
#contentLeft a span {
display: none;
}

#contentLeft a:hover span, #contentLeft a#default span {
display: block;
position: absolute;
width: 160px;
height: 120px;
top:40px;
left:425px;
border: 0;
}
The only downside is all of your images need to be the same height and width or you will see the default image all of the time.

Thanks, that works great.

Do you know of any way you can make it that when you hover over any image, so when you take the mouse off of it, the one you were on becomes the default one instead of the just the id="default" one?

Not with HTML/CSS alone, no. You would need to use some javascript.