Resources

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!


Warning: include(includes/ads.php): failed to open stream: No such file or directory in /home1/design/public_html/scripts.php on line 130

Warning: include(includes/ads.php): failed to open stream: No such file or directory in /home1/design/public_html/scripts.php on line 130

Warning: include(): Failed opening 'includes/ads.php' for inclusion (include_path='.:/opt/php54/lib/php') in /home1/design/public_html/scripts.php on line 130


le>