Image RollOverRandom Image RotationText around image

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 RotationThe 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].srcif (num<ImageArray.length-1) {num++} 
else {num=1} 
setTimeout(“RotateImages()”,2500) 

RotateImages() 
//–> 
</script> 
</body> 
</html> 
 
  
 

Page contents: itechies.net – Learn how to create Image RollOver using javascript