iEntry 10th Anniversary CSS Snippets JavaScript Snippets

 
 





Making Animated Buttons in JS

You need to place the button on the page as you would any other image on a webpage. Then you need to add a "onMouseOver" event to the image. The event causes the browser to run a javascript function that will replace the initial image with another image. Finally we add an "onMouseOut" event to the image as well. This event causes the browser to run a javascript function that inserts the initial image again when the user moves the mouse away from the image. The technique is thus a two step process:

First, you need to add mouse event settings to the HTML tags of the images. Second, you need to add a script that will be performed when the browser detects the mouse events. 

                  
<Script>
button1up = new Image; buttonUp.src = "buttonUp.gif";
button1down = new Image; buttonDown.src = "buttonDown.gif";

function MouseOverRoutine(ButtonName)
{
 if (ButtonName=="button")
 {document.button.src = buttonDown.src;}
}

Now our button will shift from buttonUp to buttonDown when a mouseover event occurs. To complete the script all we need to do is make the opposite function, that will do exactly the opposite when a mouseout event occurs.

function MouseOutRoutine(ButtonName)
{
  if (ButtonName=="button")
  {document.button.src = buttonUp.src;}
  }
</script>

If you want more buttons on your page, all you need to do is double each line referring to button and change it to button1, button2 or whatever you want to call the buttons you might have.