 |
Rollover images add a fun
element of interactivity to your site. 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. It is much easier to create them with graphics software, but you can try copying my examples. 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. Change the color if you want. #CC0000 is red.
<STYLE TYPE="text/css">
<!--
a:hover {color:#CC0000;}
--> </STYLE>.
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...
 |