My son Brock(click)
My dog Chip (click)
The big red barn
The old farmstead
<a href="pictures/oldbarn.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The old barn built in 1909"><img src="pictures/oldbarntn.jpg" width="100" height="67" alt="" title="" border="0" /></a>
<a href="pictures/oldfarmsteadbc.jpg" title="The farmstead" rel="enlargeimage" rev="targetdiv:loadarea,link:http:// coffeecup.com"><img src="pictures/oldfarmsteadbctn.jpg " width="100" height="67" alt="" title="" border="0" /></a>
Paste this code into the Body HTML
This is the code for this thumb nail
This is the code for this thumb nail.
Paste this code into the Body HTML
<div id="loadarea" style="width: 600px"></div>
This is the code for the load area. Paste into the HTML body
The image will be linked when it loads.
<a href="pictures/brocknochiphead.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none, fx:reveal">My son Brock(click)</a>
This is the code for the link. Paste to the body HTML
<a href="pictures/brockchiphead.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none, fx:none">My dog Chip (click)</a>
<div id="loadarea2"></div>
This is the code for the load area. Paste to the body HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.js">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
Paste this code into the head of the page
Now download this file, unzip it, and put it in the root of your site.
There's addition code to paste to the head of the page below and a script file to download.
Run mouse over images or text links.
Click Links
This is the code for the link. Paste to the body HTML
Back to Progrower.coffeecup.com
Adjust the "pictures/mypic.jpg" to your actual file location.
Add the pictures you want to use to VSD through the "Add files" tool and place them in a folder called pictures.
Adjust the "pictures/mypic.jpg" to your actual file location.
<a class="text1" href="pictures/oldbarn.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The old barn built in 1909">The big red barn</a>
Paste this code into the Body HTML
Code for using text link
<a href="pictures/oldfarmsteadbc.jpg" title="The farmstead" rel="enlargeimage" rev="targetdiv:loadarea,link:http://coffe ecup.com" The old farmstead</a>
Code for using text link
Paste this code into the Body HTML
thumbnailviewer2.js
<style type="text/css">
a.text1:link { color:#0000FF; text-decoration:underline; font-size:12pt; }
a.text1:visited { color:#800080; text-decoration:underline; font-size:12pt}
a.text1:active { color:#800080; text-decoration:underline; font-size:12pt}
a.text1:hover { color:#FF0000; text-decoration:none; font-size:15pt}
</style>
This is the code to add to the Header HTML of the HTML box below to override VSD and cutomize the text for the links.
If you want to edit the other links for custom text add the class="text1" to their code.