Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials
 

 
Image RollOver Random Image Rotation Text around image


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.

JSIntroduction

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>

 



 

 

Page contents: itechies.net - Learn how to create Image RollOver using javascript
javascript tutorial
javascript book
Buy this book