Simple Rollover Images
This method insures that the images are preloaded so that there
is no delay in displaying the image when the events occur.
<html>
<script>
imageA = new Image
imageB = new Image
imageA.src = "planes.jpg"
imageB.src = "car.jpg"
</script>
<body>
<a href="#"
onMouseOver="document.myimage.src=imageB.src"
onMouseOut="document.myimage.src=imageA.src">
<img src="planes.jpg" name="myimage" border="0" >
</a>
</body>
</html>
Example
Multiple Links one Simple Rollover Image
Each link points back to the document, which is fine because
just need something to click. The object "myimage" then is allowed
to rollover each image based which link is clicked.
<html>
<script>
imageA = new Image
imageB = new Image
imageC = new Image
imageD = new Image
imageA.src = "planes.jpg"
imageB.src = "car.jpg"
imageC.src = "rock.jpg"
imageD.src = "leaves.jpg"
</script>
<body>
<img src="planes.jpg" name="myimage" align="left">
<a href="#" onClick="document.myimage.src=imageA.src">Planes</a><br>
<a href="#" onClick="document.myimage.src=imageB.src">Car</a><br>
<a href="#" onClick="document.myimage.src=imageC.src">Rock</a><br>
<a href="#" onClick="document.myimage.src=imageD.src">Leaves</a><br>
</body>
</html>
Using a Function to Create a Simple Rollover Image
The function "swapimg" takes the two arguments: A and B. These
are then used to define the .src of the myimage object.
<html>
<script>
imageA = new Image
imageB = new Image
imageC = new Image
imageD = new Image
imageA.src = "planes.jpg"
imageB.src = "car.jpg"
imageC.src = "rock.jpg"
imageD.src = "leaves.jpg"
function swapimg(a,
b)
{
a.src = b.src
}
</script>
<body>
<img src="planes.jpg" name="myimage" align="left">
<a href="#" onMouseOver="swapimg(myimage,imageA)">Planes</a><br>
<a href="#" onMouseOver="swapimg(myimage,imageB)">Car</a><br>
<a href="#" onMouseOver="swapimg(myimage,imageC)">Rock</a><br>
<a href="#" onMouseOver="swapimg(myimage,imageD)">Leaves</a><br>
</body>
</html>
Example
Planes
Car
Rock
Leaves
Creating a rotating image
The following uses an array to store the images used and then
recalls the function every 2 seconds to get the new image.
<html>
<script>
images = new Array("planes.jpg","car.jpg","rock.jpg","leaves.jpg")
icounter = 0
imgCount = images.length
function rotate()
{
icounter++
if(icounter == imgCount)
{
icounter = 0
}
myimage.src=images[icounter]
setTimeout("rotate()", 2000)
}
</script>
<body onLoad="rotate()">
<img src="leaves.jpg" name="myimage">
</body>
</html>
Example
MouseOver the image to start image rotation
623.845.3000 
