Organic-Intelligence.com
Home | About Us | Blog | Web Technologies | SEO | Job Seeker
Creating an image rollover

<html>
<head>
<script type="text/javascript">
<!--
image01= new Image()
image01.src="img01.jpg"
image02= new Image()
image02.src="img02.jpg"
//-->
</script>
</head>

<body>
<a href="nextpage.htm" 
onmouseover="document.images['test1'].src=image02.src" 
onmouseout="document.images['test1'].src=image01.src">
<img src="img01.jpg" name="test1"></a>
</body>

</html>


Or create a rollover function:

<html>
<head>
<script type="text/javascript">
<!--

function rollover(nameOfImg, newImg){
document.images[nameOfImg].src=newImg.src
}
//-->
</script>
</head>

<body>
<a href="#" onmouseover="rollover('test1', image02)"
onmouseout="rollover('test1', image01)">
<img src="img01.jpg" name="test1"></a>

</body>

</html>