Show image on mouseover by http://progrower.coffeecup.com/pictureonmouseover.html

Mouse Here To Show Image

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;

</style>

Paste this code into the Head of the page

Change the src for the image that you want to use.

Show image on mouseover

Back to Progrower.coffeecup.com

Put a HTML box on your page then paste the code to the body html. Now in VSD click on "Edit" then "Add Files". Create a new folder for your images then click on the folder and browse to the images that you want to add. Now go to the code that's in the html box and tweak the src to match the name of the folder and of the images that you just added.

In my example the src is this.
<img src="pictures/chip-color-collarprofile.jpg">
The folder I added is "pictures" and the image I added to that folder is named "chip-color-collarprofile.jpg". Change those to meet you folder and file name.

Change this text to what you want yours to say.

<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Mouse Here To Show Image</a>

<div id="Style"><img src="pictures/chip-color-collarprofile.jpg"></div>

The code for this HTML box is below

The code for this HTML box is to the left.