Between the Code

This seems like such an old topic, but it’s still one that many don’t understand. It’s also a good one to use to start this blog off.
A mouse rollover is when you move your mouse pointer over graphics or text and it changes somehow to indicate that you are hovering over it. This happens a lot in navigation buttons where it gets highlighted before you click it.

Let’s take a simple example of a button. Most buttons are images and the code looks like this:
<img src=”images/imagename.jpg”/>
If you don’t normally see code, stay with me. It’s fairly painless.
All this tag says is that it is an image (img) and the image filename is imagename.jpg and it is located in the images directory.

Now, to make the effect, we need to add 2 parameters. These are additional instructions to tell the computer what to do when the mouse moves over the image.
The first is onmouseover. This gives instructions on what to do when the mouse moves over the image. Most of the time you will use a style that you want to switch to or javascript that will create the effect.
So now we have something similar to
<img src=”images/imagename.jpg” onmouseover=”this.style=change”/ >

The above code changes to a different style. The last part of this is onmouseout. This gets run when you move the mouse away from the image. Usually this is for resetting to what things were originally. Why do we need to do that? Because we changed it and we have to tell the computer what to change it back to or it would just leave it changed.
So now we have:
<img src=”images/imagename.jpg” onmouseover=”this.style=change” onmouseout=”this.style = oldstyle”/ >

This just changes it back to the old style, assuming that’s what we used before we hovered over the image.
Take a look at some code for rollover effects and you will see this. To view, find the page you want and go to the view menu and then choose Source.

Examples:
Mind Architecture - this is my old site. The nav on the left has a nice rollover effect. This is achieved totally with text, html, and css. You can do more advanced functionality also.
Mohawk Valley Fine Arts - this is also a text, html, css rollover. The difference is that these ‘buttons’ are just css and text and not buttons at all. This is great for doing dynamic web sites where the nav may get updated.
Hasenstab Architects - This site uses rollover buttons but instead of changing the button to looking like it’s pressed or changing color, it has a little graphic appear next to it. This nav uses images for the regular and the mouse over positions.
Mobility Works - a more conventional use of images for mouse rollovers.

Good luck!

This entry was posted on Monday, February 6th, 2006 at 9:54 pm and is filed under Other Coding. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.