Image Rollover with JavaScript

This page shows a simple example of image rollover. Move your mouse to the following image and see it change.

Here's the code:

<img id="xyz" src="i/tile_A.png" alt="tile A">

// the javascript code
var xyz = document.getElementById("xyz");

xyz.onmouseover = f1;
xyz.onmouseout = f2;

function f1() { xyz.src="i/tile_B.png";}
function f2() { xyz.src="i/tile_A.png";}

Related essays:

• ImageMagick Tutorial by Example