HTML WEB DESIGN

ASSIGNMENT – MOUSEOVER BUTTON BAR

You will create a navigation bar consisting of mouseOver buttons.

MOUSEOVER BUTTON

A mouseOver button is a button that changes when the mouse cursor is over it and returns to its initial state when the mouse cursor is no longer over it.

The web designer creates this using three components:

• An image of the button;
• A different image of the button that is displayed when the mouse cursor is over the button;
• Code required to do the switching

GUIDE – OUR FIRST MOUSEOVER BUTTON

STEP 1 – CREATE & SAVE IMAGES

First we create two different button images. You can use a button generator website to do this.

Note that these two images are regular images. Below you see both images saved to my computer in the same folder as the html document that will use the images.

You now add the code that will insert the first image into your document.

...

<img src="buttonA.png">

...

Click here to see this incomplete example so far. Remember that you can view the source code if you’d like.

STEP 2 – CODE FOR MOUSEOVER EFFECT

We want the image to be changed to the second image when the mouse cursor goes over it. We do this by using the mouseOver attribute in the img tag. So we start by adding:

onMouseOver=""

Note that the value of the onMouseOver attribute is actually JavaScript coding – a powerful but different technology then HTML.

The JavaScript code needs to be:

this.src='buttonB.png'

Putting all of this together, we get:

...

<img src="buttonA.png" onMouseOver="this.src='buttonB.png'">

...

Notice that at the end, there is a single quote followed by a double quote. Also notice that this tag is already getting messy – and we aren’t done yet.

Click here to see this incomplete example so far. Notice that the button doesn’t change back once the cursor is moved away.

STEP 3 – CODE FOR MOUSEOUT EFFECT

We now want the image to be changed back to the origian when the mouse cursor leaves the image. This is called a mouseOut event. The img tag attribute is called onMouseOut. We start with this:

onMouseOut=""

Again, the code that goes inside the onMouseOut attribute is JavaScript. It looks like this:

this.src='buttonA.png'

In our document, our now very messy img tag looks like this:

...

<img src="buttonA.png" onMouseOver="this.src='buttonB.png'" onMouseOut="this.src='buttonA.png'">

...

Note that the above tag could all be placed on one like if you prefer.

Click here to see this still incomplete example.

STEP 4 – ADDING THE LINK

The last step is fairly simple. We simply add the link. We start by adding the <a> and </a> around the img tag. Then we add the href attribute. And done.

...

<a href="filename.html">

<img src="buttonA.png" onMouseOver="this.src='buttonB.png'" onMouseOut="this.src='buttonA.png'">

</a>

...

Note: Instead of filename.html, you need to put the actual file that you want to link to.

Click here to see this completed example.

TASK

Create a navigation bar consisting of at least four different mouseOver buttons. So you will need at least 8 images of buttons overall.

Click here for an example with just regular images.

Click here for the same example with mouseover images.

Click here for the same example with linked mouseover images – a complete navigation bar.