They are easy to make. Just create an image, save it, then make a subtle change to it and save again. You will then have to insert the images into a rollover javascript. You can get the javascript at Bravenet.
When your visitor moves their mouse over your first image, it automatically changes to your second. Both images need to be the same size. Rollovers are used primarily for navigation buttons, but you can do all kinds of creative things with them.
Another way to incorporate rollovers is by using css, cascading style sheets. You can make all kinds of changes to your text links, making them bigger, smaller, glow, change color, etc. just by adding a small bit of code. I like to have my text links change from blue to red when you rollover them. It makes me want to click.
Try it. Just paste this into the head section of your page...
<STYLE TYPE="text/css">
<!--
a:hover {color:#CC0000;}
--> </STYLE>
Change the color if you want. #CC0000 is red.
Here is a fun rollover trick to use if you have a large table. You can incorporate css and javascript to make each line of your table change color so your visitor can easily see which line they are reading.
| company 1 |
company 2 |
company 3 |
|
| A |
|||
| B |
|||
| C |
Rollovers are most often incorporated into a series of navigation buttons. Tabs across the top are becoming more popular. As long as your button images are small, making them change doesn't add much size to your page, but definitely adds an element of style and interactivity.
 |
 |
 |
 |
You can also make other things happen when an image is rolled-over. The example below is an image swap. The look of the button changes, the image changes and it is also a link.
|
 |
You don't have to use rollovers just for your navigation, you can transform any graphic to a rollover. Maybe making images into rollovers won't make any difference in your sales, but I think they add an element of fun to your pages just the same. Life is short. Surprise your visitors! They just might surprise you and make a purchase...
 |
 |
You can also make your images appear to move.
Move your mouse over the arrow, then click it for more tips...
 |