mouseover thumbnail to large picture

[webmom]

I found this code that I love. http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P10/
I have inserted the css code and saved it as my style.css page.
However, I'm not sure how to insert the code into my html page where I have about 10 thumbnails that I want a larger picture to appear for each one.
Does anyone know how to insert the code into my page? I have my thumbnail picture named images/makerover2.jpg and the larger picture as images/makeover1.jpg
What style link to I use at the top of my html page?
here is the CSS code:
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>


Here is the HTML code:

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

[Veronica]

In the head section, you would put:


<link rel="stylesheet" type="text/css" href="style.css" />


This is assuming that the page you've saved as style.css is in the same directory. If it's not, you would need to put in the correct path.

Then in the html part (assuming that makeover2 is the small picture and makeover1 is the big one) you would put:



<a class="thumbnail" href="#thumb"><img src="images/makerover2.jpg" width="--" height="--" border="0" /><span><img src="images/makeover1" /><br />Your caption here</span></a>


or (better)



<a class="thumbnail" href="#thumb"><img src="images/makerover2.jpg" style="width:--px; height:--px; border:0;" /><span><img src="images/makeover1" /><br />Your caption here</span></a>


Replace the double dashes with the correct height and width for the small (thumbnail) picture. And of course, replace "your caption here" with whatever you want to say.

[boynevalley]

Excellent script.. very useful.

One thing - anyone know how I can centre the loaded image on the browser window????