ADDING A ROLLOVER BUTTON

 

GENERAL INFORMATION

 

There are two concepts at play here.  First, the rollover button is created by several different images of the same button (usually with different colours).  Second, the link is done simply by using the <a> tag.

 

STEP 1 – CREATE BUTTONS

 

Create 2 or 3 buttons that all are similar but have minor differences.  Save your files in your webpage folder.


Example

Button 1 (Regular look)

Button 2 (Mouse over look)

Button 3 (Mouse down/clicked look)

 

STEP 2 – ADD REGULAR BUTTON TO WEBPAGE

 

The tag to add the image "button.png" to a website is:

 

<img src="button.png">

 

            Of course, replace button.png by the actual name of your file.  This file has to be in the same folder as you webpage.

 

            STEP 3 – MAKE THE IMAGE A LINK

 

Remember that the tag to make a link to another page is:

 

            <a href="otherPage.html">TEXT</a>

 

To have an image be a link, we simply place the image tag in between the opening and closing <a> tags.  The result is:

 

            <a href="otherPage.html">

<img src="button.png">

</a>

 

            The above is displayed on three different lines because we have to change the img tag in the next step.

 

            STEP 4 – ADD ROLLOVER EFFECT

 

We need to add the JavaScript code that will change the image to button2.png when the mouse goes over the button.  This code is simply put in as an attribute inside the img tag.  The code is:

 

                        onMouseOver="src='button2.png'"

 

            Similarly, we want the button to return to its regular look when the mouse gets out from on top of the button.

 

                        onMouseOut="src='button.png'"

 

            Finally, we also want to set another button look when we click on the button (mouse down).

 

                        onMouseDown="src='button3.png'"

 

            All of the above commands go into the img tag.  The overall result looks like this:

 

                        <a href="http://www.google.ca">

<img src="button.png"   onMouseOver="src='button2.png'" onMouseOut="src='button.png'" onMouseDown="src='button3.png'">

</a>

 

COMMON ERRORS

 

·         Image doesn’t rollover (change) – Check the quotes.  You must use both single and double quotes in this.

·         Image doesn’t show – The file was renamed to a different file extension.

·         Image doesn’t show – The file was saved to a different folder.  It needs to be in the same place as your webpage.

·         Link doesn’t work – The img tag is not in between the <a> tag and the </a> tag. 

·         Link doesn’t work – The link needs to have the http:// for links to websites.

 

EXAMPLE

 

Click here to see the example.  Use View Source to see the code.