Site hosted by Angelfire.com: Build your free website today!

| Home | JS 1 | JS 2 | A/S Online | St 1 | St 2 | Links |

OneAnimated buttons are quite easy to do. All you need is a image swap function. I named my function hlight. Essentially it swaps the original image with another. You can assign separate images to all the mouse events like onMouseOver, onMouseDown, onMouseUp and onMouseOut. Try moving your mouse to the image below and click on them. See what happens .... cool huh?

Next back


You will need this images for this to work: Just copy the images below. I have made two sets for you.
original
onMouseOver/onMOuseUp
onMouseDown


Now for the Script. Like I have said I use the hlight function. The code is as follows:

function hlight(imgOrg,imgSwap) { document.images[imgOrg].src = eval(imgSwap + ".src") }

4Then we preload the images. This is to ensure that the images are loaded first before the user uses the buttons.The code is as follows:

next1=new Image(120,30); next1.src="next1.jpg"; next2=new Image(120,30); next2.src="next2.jpg"; next3=new Image(120,30); next3.src="next3.jpg";

5Finally we place the button on to our page. It also need a bit of scripting. The code:

<A HREF="yourpage.html" onMouseOver="hlight('next','next2')" onMouseDown="hlight('next','next3')" onMouseUp="hlight('next','next2')" onMouseOut="hlight('next','next1')"> <IMG SRC="next1.jpg" ALT="Next" BORDER="0" name="next"></A>
That's it. You got yourself an animated button!!

Next