Hover Button Preview

To create a hover button like this...

Creating Hover Buttons

Hover buttons are customized buttons which display 3 different images of the button: Normal, Hover, and Clicked. To create a hover button, open the File menu, select "New…", select "Start with a template" and then select the Hover Button option. You can open any hover button template by double clicking on it.

The hover button template will display 4 buttons. The top button is a preview. This button allows you to preview the 3 states of the button (Normal, Hover & Click).

The other 3 buttons can be customized. To customize a hover button, simply click on the button you want to change, and then alter the button as you see fit. Once you are finished customizing the button, save your changes.

Inserting Hover Buttons into Web Pages

Once you’ve created and saved a hover button as an HTML file, you can insert the button into your own web page, and you can customize a link for it.

To insert a hover button into a web page, you need to perform five easy steps:

  1. Open two instances of Notepad (or any other word processor).
  2. Open the HTML file for the hover button in your word processor (you may need to change the "Files of Type" category to "All Files (*.*)").
  3. Open the HTML file for your web page in the other word processor.
  4. Copy Section 1 of the hover button HTML code and paste it between the <HEAD> </HEAD> tags of your HTML document.
  5. Copy Section 2 of the hover button HTML code and paste it between the <BODY> </BODY> section of your HTML document.

Once the hover button is inserted into your web page, you can move the button around your page by opening your web page in any web editor and manually moving the button to your desired location.

Customizing the Link

To customize the hover button’s link, open your web page into any word processor. Scroll down to the beginning of Section 2. You will notice an HTML tag which reads:

<a href="http://www.netstudio.com".>

This indicates that the button is currently linked to the web site www.netstudio.com. To link the button to a different site, simply erase the NetStudio web address and replace it with your desired web address. The hover button will now be linked to your desired web address.

 

Inserting Multiple Hover Buttons

To insert multiple hover buttons, you need to copy/paste a few files and rename a few components.

1. Follow the instructions above to create and insert your first hover button.

2. Make a copy of each hover button component (i.e. LED_Normal_Button.gif, LED_Hover_Button.gif, LED_Click_Button.gif) and paste them into the same folder as your HTML page. (The files will automatically be renamed something like "Copy of led_normal_button.gif". If you are creating a third button, recopy the files which will be renamed "Copy of copy of led_normal_button.gif")

3. Reopen Notepad and open the file of the HTML page you are inserting the hover buttons into.

4. In Section 1 of the hover button code (the section you copy/pasted to insert the first hover button), copy the following code and then paste it immediately below itself: 

var normal = new Image;
normal.src = "led_normal_button.gif";
var hover = new Image;
hover.src = "led_hover_button.gif";
var click = new Image;
click.src = "led_click_button.gif";

5. Rename the pasted code to indicate that it is the 2nd hover button (or 3rd, 4th, etc.). It should look like this (you don’t need to bold the numbers):

var normal2 = new Image;

normal2.src = "Copy of led_normal_button2.gif";

var hover2 = new Image;

hover2.src = "Copy of led_hover_button2.gif";

var click2 = new Image;

click2.src = "Copy of led_click_button2.gif";

6. In Section 2 of the hover button code (the second section you copy/pasted to insert your first hover button), copy all of Section 2 and paste it immediately below itself. It will end up looking like this:

<a href="http://www.netstudio.com" onmousedown="if(fValidVer) Swap('original', 'click');" onmouseup="if(fValidVer) Swap('original','hover');" onmouseout="if(fValidVer) Swap('original','normal'); onmouseover="if(fValidVer) Swap('original', 'hover' ); "> <img alt="Hover Button Preview" border="0" name="original" src="led_normal_button.gif"></a>

<a href="http://www.netstudio.com" onmousedown="if(fValidVer) Swap('original', 'click');" onmouseup="if(fValidVer) Swap('original','hover');" onmouseout="if(fValidVer) Swap('original','normal'); onmouseover="if(fValidVer) Swap('original', 'hover' ); "> <img alt="Hover Button Preview" border="0" name="original" src="led_normal_button.gif"></a>

7. Rename the pasted code to indicate that it is the 2nd hover button (or 3rd, 4th, etc.). It should look like this:

<a href="http://www.netstudio.com" onmousedown="if(fValidVer) Swap('original2', 'click2');"

onmouseup="if(fValidVer) Swap('original2','hover2');" onmouseout="if(fValidVer) Swap('original2','normal2'); onmouseover="if(fValidVer) Swap('original2', 'hover2' ); ">

<img alt="Hover Button Preview" border="0" name="original2" src="copy of led_normal_button.gif"></a>

Finally, save your changes. You can now open your multiple hover button web page in NetStudio or in any web editor.

 

 

back forward
Previous Page Next Page