Ray's Test Pages - Altering an image
First of all, the background image on this page is fixed using the CSS code...
<style type="text/css">
<!--
body{background-image: url("tile041.jpg");
background-attachment: fixed;}
-->
</style>
in the HEAD section of the page.
Using JavaScript, the onmouseover and onmouseout event when the mouse cursor is moved over the following image then the image changes. When the mouse cursor leaves the image it is restored to the original image.
To do this put the following JavaScript code in the HEAD section of the page...
<script language="javascript">
<!--
function rollOver(imgName, imgSrc)
{
document[imgName].src = imgSrc;
}
-->
</script>
Where the image is to appear in the BODY put this code (all on one line)...
<p align="center"><img border="0" src="ujack1.gif" width="434" height="217" name="flag" onmouseover="rollOver('flag', 'ujack2.gif')" onmouseout="rollOver('flag', 'ujack1.gif')"></p>
This page written 1st May 2006 in response to http://www.250free.com/help/forum/viewtopic.php?t=3074
