How to Create Image Rollovers in JavaScript
Leran how to write a small javascript that changes an image on mouseover. Image rollovers are implemented by creating two images for the same button. The first image is that which you want displayed when the mouse is not hovering over it.The second image is the graphic you want displayed when the mouse pointer is over the graphic.
The following is a simple example. Pass the mouse over the button below.
When your mouse moves over the link above, the JavaScript snippet above will attempt to execute the function AboveImage(). When your mouse moves away, the function LeaveImage() will be executed.
Try the following Source Code:Remeber to put the images in the same folder as the script.
<HEAD>
<SCRIPT language="JavaScript">
<!-- Begin
function AboveImage(name,source) {
document[name].src=source;
}
function LeaveImage(name,source) {
document[name].src=source;
}
// End -->
</SCRIPT>
<BODY>
<CENTER>
<A HREF="intro.htm" onmouseover="AboveImage('button1','20472.jpg')"
onmouseout="LeaveImage('button1','28297.jpg')">
<IMG NAME="button1" SRC="28297.jpg" ALT="Mouse Over
Image"></A> </CENTER>
</BODY>
Top
Javascript Random Image Rotation
The random image rotation code rotates images at random on a timer.First you specify a list of images to display in the roration code.You can easily add multiple sets of rotating images.This image rotation code is very easy to set up. If you want your images can be linked.
Try the following Source Code.Remeber to add the images in the path specified.
<html>
<head>
<script language="JavaScript">
<!--
function InitializeImages() {
this.src = InitializeImages.arguments[0];
}
var ImageArray = new Object();
ImageArray[0] = new InitializeImages("image1.jpg");
ImageArray[1] = new InitializeImages("image2.jpg");
ImageArray[2] = new InitializeImages("image3.jpg");
ImageArray[3] = new InitializeImages("image4.jpg");
ImageArray.length=4;
//-->
</script>
</head>
<body>
<img src="image1.jpg" name="slide" width=100 height=56>
<script>
<!--
//variable that will increment through the images
var num=0
function RotateImages(){
document.images.slide.src=ImageArray[num].src
if
(num<ImageArray.length-1) {num++}
else {num=1}
setTimeout("RotateImages()",2500)
}
RotateImages()
//-->
</script>
</body>
</html>
