Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Image Swap</title>
<style type="text/css">
<!--
body, td { font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px; }
h1{ font-size:16px; }
a:link { color:#33c }
a:visited { color:#339 }
-->
</style>
<script type="text/javascript">
<!--
// put images to preload in this array
var preload_list = new Array("MagnoliaGlenfirstfloorCambridge.jpg","MagnoliaGlensecondfloorCambridge.jpg", "MagnoliaGlensecondfloorBelmont.jpg",);
// preload (change path to images if necessary)
if (document.images) {
var image_list = new Array();
for (var preload_counter=0; preload_counter<preload_list.length; preload_counter++) {
image_list[preload_counter] = new Image();
image_list[preload_counter].src = path_to_images + preload_list[preload_counter];
}
}
var swapTimer;
// delay before restoring original image onmouseout
var restore_delay = 800; // milliseconds
function swapImage(num) {
if (swapTimer) clearTimeout(swapTimer);
if (document.images) {
document.swap.src = image_list[num].src;
}
}
function restoreImg() {
swapTimer = setTimeout("swapImage("+0+")",restore_delay);
}
//-->
</script>
</head>
<body>
<table border="0" cellpadding="6" cellspacing="0">
<tr>
<td colspan="2"><h1>Place mouse over text to view image</h1></td>
</tr>
<tr>
<td valign="top" width="100" rowspan="2">
<!-- pass the array index number of the image you wish to show -->
<p><a href="#" onmouseover="swapImage(1)" onmouseout="restoreImg()">Magnolia Glen: Cambridge First Floor Plan</a></p>
<!-- This link shows how to immediately swap the original image back in -->
<p><a href="#" onmouseover="swapImage(2)" onmouseout="swapImage(0)">Magnolia Glen: Cambridge Second Floor Plan</a></p>
<!-- no onmouseout, so original image not restored -->
<p><a href="#" onmouseover="swapImage(3)">Magnolia Glen: Belmont First Floor Plan</a></p>
</td>
</tr>
<tr>
<td valign="top">
<img name="swap" src="MagnoliaGlenfirstfloorCambridge.jpg" border="0">
</td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
var image_list = new Array();
Add this:
var path_to_images = "http://www.yourdomain.com/images_folder"
Hope that works for ya!
