JavaScript Code for Pressed Buttons

Instructions	JavaScript Code to Copy and Paste into Your HTML Document. Replace the colored text with your specifications if neccesary.
Insert the code on the right directly after the <head> tag in your HTML document. button is a temporary name given to the depressed state button graphic in order to preload it. This name does not need to be changed, unless you have more than one button on your page (see below). (70,25) represents the dimensions of your button graphic. Change these to match the (width,height) in pixels, of your graphic. down.gif is the filename of your depressed state button graphic. If you have placed this graphic in a different directory than the HTML document, you will need to include its path.	<script type="text/javascript"> <!-- function pressButton(name,image) { document[name].src=image; } if (document.images) { button=new Image(70,25); button.src="down.gif"; } //--> </script>
Insert the code on the right, where you want your button located in the body of your HTML document. http://VisualTutorials.com Replace my URL with yours. This is where visitors will be sent when they click your button. home is a name used to identify which graphic to change. If you change one instance of this name, then you must change the other two instances respective to each indivdual button. up.gif is the filename of your unpressed state button graphic. Include path if neccesary. width="70" height="25" (Same as Above)	<a href="http://VisualTutorials.com" onmouseup="pressButton ('home','up.gif')" onmousedown="pressButton ('home','down.gif')"> <img name="home" src="up.gif" width="70" height="25" border="0"></a>
Using Multiple Buttons
Here is an example of the code placed in the head section when three different buttons are used on the page. Notice how the colored text has a unique name for each button.	<script type="text/javascript"> <!-- function pressButton(name,image) { document[name].src=image; } if (document.images) { button1=new Image(70,25); button1.src="down1.gif"; button2=new Image(70,25); button2.src="down2.gif"; button3=new Image(70,25); button3.src="down3.gif"; } //--> </script>
p>Here is an example of the code placed in the body section when three different buttons are used on the page. Again, the colored text has a unique name for each button.	Button #1 <a href="http://VisualTutorials.com" onmouseup="pressButton ('home1','up1.gif')" onmousedown="pressButton ('home1','down1.gif')"> <img name="home1" src="up1.gif" width="70" height="25" border="0"></a> Button #2 <a href="http://VisualTutorials.com" onmouseup="pressButton ('home2','up2.gif')" onmousedown="pressButton ('home2','down2.gif')"> <img name="home2" src="up2.gif" width="70" height="25" border="0"></a> Button #3 <a href="http://VisualTutorials.com" onmouseup="pressButton ('home3','up3.gif')" onmousedown="pressButton ('home3','down3.gif')"> <img name="home3" src="up3.gif" width="70" height="25" border="0"></a>

Instructions

JavaScript Code to Copy and Paste into Your HTML Document. Replace the colored text with your specifications if neccesary.

Insert the code on the right directly after the <head> tag in your HTML document.

button is a temporary name given to the depressed state button graphic in order to preload it. This name does not need to be changed, unless you have more than one button on your page (see below).

(70,25) represents the dimensions of your button graphic. Change these to match the (width,height) in pixels, of your graphic.

down.gif is the filename of your depressed state button graphic. If you have placed this graphic in a different directory than the HTML document, you will need to include its path.

Insert the code on the right, where you want your button located in the body of your HTML document.

http://VisualTutorials.com
Replace my URL with yours. This is where visitors will be sent when they click your button.

home is a name used to identify which graphic to change. If you change one instance of this name, then you must change the other two instances respective to each indivdual button.

up.gif is the filename of your unpressed state button graphic. Include path if neccesary.

width="70" height="25" (Same as Above)

Using Multiple Buttons

Here is an example of the code placed in the head section when three different buttons are used on the page.

Notice how the colored text has a unique name for each button.

button2=new Image(70,25);
button2.src="down2.gif";

button3=new Image(70,25);
button3.src="down3.gif";
}
//-->
</script>

p>Here is an example of the code placed in the body section when three different buttons are used on the page.

Again, the colored text has a unique name for each button.

Button #1

Button #2

Button #3