The above is an example of using HTML based mouse over code to display thumbnails and larger versions of photos.  The code used for the example above has been modified from what was described on Roddy’s iWeb for Musicians site to have 2 columns of thumbnails on the left. His site has several different versions of this type of presentation. This allows one to add titles to each photo that are search engine compatible. They can be added by changing the titles "Image 1", "Image 2", etc. to what you would want the search engines to find.

The image files were placed in the RolloverImages folder on my server so the link to each would be http://old toad.net/RolloverImage/File_Name.

The code used is:

<!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>

<title>Expanding Photos</title>

<style type="text/css">

img.mini {border:none}

div#minis a:hover{background:}

div#minis a img.big {height: 0; width: 0; border-width: 0}

div#minis a:hover img.big {position:absolute; top:20px;

left:139px;height:375px;width:500px;border:none}

#frame {position:absolute;

top:80px;left:225px;height:375px;width:500px;border:0px solid black;font: 2em , Verdana, ;color:White;padding:10px}

p {margin-bottom:23px}

</style>

</head>

<body>

<div id="frame" border:1px solid White;>

</div>

<div id="minis" border:1px solid White;>


<p><a class="photo" title="Image1"> <img class="mini"

src="http://old toad.net/RolloverImages/1.jpg" width="100" height=”75"

alt="1" /><img class="big"

src="http://old toad.net/RolloverImages/1.jpg" width="100" height=”75"

/><a class="photo" title="Image2"> <img class="mini"

src="http://old toad.net/RolloverImages/2.jpg" width="100" height=”75"

alt="2" /><img class="big"

src="http://old toad.net/RolloverImages/2.jpg" width="100" height=”75"

/></p>


<p><a class="photo" title="Image3"> <img class="mini"

src="http://old toad.net/RolloverImages/3.jpg" width="100" height=”75"

alt="03" /><img class="big"

src="http://old toad.net/RolloverImages/3.jpg" width="100" height=”75"

/><a class="photo" title="Image4"> <img class="mini"

src="http://old toad.net/RolloverImages/4.jpg" width="100" height=”75"

alt="04" /><img class="big"

src="http://old toad.net/RolloverImages/4.jpg" width="100" height=”75"

/></a></p>


<p><a class="photo" title="Image5"> <img class="mini"

src="http://old toad.net/RolloverImages/5.jpg" width="100" height=”75"

alt="05" /><img class="big"

src="http://old toad.net/RolloverImages/5.jpg" width="100" height=”75"

/><a class="photo" title="Image6"> <img class="mini"

src="http://old toad.net/RolloverImages/6.jpg" width="100" height=”75"

alt="06" /><img class="big"

src="http://old toad.net/RolloverImages/6.jpg" width="100" height=”75"

/></a></p>


<p><a class="photo" title="Image7"> <img class="mini"

src="http://old toad.net/RolloverImages/7.jpg" width="100" height=”75"

alt="07" /><img class="big"

src="http://old toad.net/RolloverImages/7.jpg" width="100" height=”75"

/><a class="photo" title="Image8"> <img class="mini"

src="http://old toad.net/RolloverImages/8.jpg" width="100" height=”75"

alt="08" /><img class="big"

src="http://old toad.net/RolloverImages/8.jpg" width="100" height=”75"

/></a></p>


<p><a class="photo" title="Image9"> <img class="mini"

src="http://old toad.net/RolloverImages/9.jpg" width="100" height=”75"

alt="09" /><img class="big"

src="http://old toad.net/RolloverImages/9.jpg" width="100" height=”75"

/><a class="photo" title="Image10"> <img class="mini"

src="http://old toad.net/RolloverImages/10.jpg" width="100" height=”75"

alt="10" /><img class="big"

src="http://old toad.net/RolloverImages/10.jpg" width="100" height=”75"

/></a></p>

</div>

</body>

</html>

Mouse Over Photo Presentation