Image Gallery

Black Sea Waves
Frog
Bratz dolls
Frog
Rilled sheep and chicken
Sea stones
Sunset in the Forest
Winter blooming miracle
It's always good to write down the size of each image, in that way the page will load quicklier

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">

a, a:visited, a:hover {}

#container {position:relative; width:728px; height:700px; background:#888; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:17px 48px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}
#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:710px; background:#bbb; border:1px solid #fff; text-align:center;}
#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}
#container a.pics:hover img.thumb {border:1px solid #fff;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:480px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:480px;}

#container a.pics:focus {outline:0;}
#container a.pics:focus img.thumb {border:1px solid #fc0}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:480px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}
#container span.info a {color:#000;}
#container span.info a:hover {text-decoration:none;}
</style>
<!-- You must build this code into - body -->
<div id="container">
<a class="pics" href="nogo"><img class="thumb" src="tn_Black-Sea-Waves.jpg" width="75" height="64" alt="Black Sea Waves">
<span><img src="Black-Sea-Waves.jpg" alt="Black Sea Waves" title="Black Sea Waves" width="494" height="420"><br>Black Sea Waves</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_frog1.jpg" width="96" height="75" alt="Frog">
<span><img src="frog1.jpg" alt="Frog" title="Frog"><br>Frog</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_bratz-dolls.jpg" width="75" height="63" alt="Bratz dolls">
<span><img src="bratz-dolls.jpg" alt="Bratz dolls" title="Bratz dolls" width="494" height="417"><br>Bratz dolls</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_frog.jpg" alt="frog" width="75" height="57">
<span><img src="frog.jpg" alt="Frog" title="Frog" width="496" height="376"><br>Frog</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_rilled-sheep-and-chicken.jpg" width="75" height="57" alt="Rilled sheep and chicken">
<span><img src="rilled-sheep-and-chicken.jpg" width="496" height="374" alt="Rilled sheep and chicken" title="Rilled sheep and chicken"><br>Rilled sheep and chicken</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_sea-stones.jpg" width="75" height="57" alt="Sea stones">
<span><img src="sea-stones.jpg" width="496" height="375" alt="Sea stones" title="Sea stones"><br>Sea stones</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_Sunset-in-the-Forest.jpg" width="75" height="57" alt="Sunset in the Forest">
<span><img src="Sunset-in-the-Forest.jpg" width="496" height="374" alt="Sunset in the Forest" title="Sunset in the Forest"><br>Sunset in the Forest</span>
</a>
<a class="pics" href="#nogo"><img class="thumb" src="tn_winter_blooming_miracle_1.jpg" width="75" height="50" alt="Winter blooming miracle">
<span><img src="winter_blooming_miracle_1.jpg" width="496" height="329" alt="Winter blooming miracle" title="Winter blooming miracle"><br>Winter blooming miracle</span>
</a>
</div>