Javascript rollover image script

Rollover buttons with Javascript

script written by

Description:

This script will change the appearance of an image to another state. This creates a hover effect for images that can be used for navigation links. Necessary tools: some images with 2 states (e.g. 2 different background colours, text colours for the same image) and a text editor for amending the code for your needs.

		
<!-- rollover images using javascript. http://www.designplace.org. -->
<!-- place the following code  within the <BODY> of your document -->

<script language="javascript" type="text/javascript">

normal_image = new Image();
normal_image.src = "path/img.gif";

mouseover_image = new Image();
mouseover_image.src = "path/img2.gif";


<!-- repeat the 4 lines above for any subsequent images. -->

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>

<!-- Place this code where you want the rollover buttons to appear.
Parts to change here: name_of_img (to match <img name="", below), 
Image variable (e.g mouseover_image/normal_image - to match above code), 
href element to your documents url and the img name & src. -->

<a href="page.html" onMouseOver="swap('name_of_img','normal_image')" 
onMouseOut="swap('name_of_img','mouseover_image')">
<img name="name_of_img" src="path/img.gif" border="0"></a>

Preview script (new window) | Alternatively, Click here to download the files

Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

Partners

Advertise here!

Ads

Reseller Web Hosting