Rollover buttons with Javascript (Rated 0)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. Code starts here
<!-- 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>
Submitted by Devscripts on 13-02-2003 20:13 |
