Full code - images.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript image roll-overs</title>
<script type="text/javascript">
<!--
function rollover(imageObj,newImage)
{
   imageObj.src = newImage;
…

Download the code »

Tutorial

We firstly need to create the function that will be called when the user puts their mouse over an image.

function rollover(imageObj,newImage)
{
   imageObj.src = newImage;
}

This function is fairly simple and requires the two images as arguments.

Event handlers

To attach the function to the images we need to use the onmouseover event handler and the onmouseout event handler.

<img src="image1.png" onmouseover="rollover(this,'image2.png')" onmouseout="rollover(this,'image1.png')" />

Note how the this object has been used to get the image object so that its location can be changed without searching for the image element.

Further Reading

Adobe Fireworks® Adobe Flash® and Adobe Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
MySQL is a registered trademark of MySQL AB in the United States, the European Union and other countries.
Copyright Pixelcode 2005 - 2010