|
Preface
The
rest of this tutorial will both refer to and attempt to explain
the construction of the following example.
So please take the time right now and take a look at it.
Also,
if you'd like to follow along on your own, please download
the graphics that will be used and/or a Fusion template of
the example used in this tutorial.
Okay,
Let's Get Started!
The most noticeable element of RollOvers are of course the
images. Image creation is probably the most difficult of all
the processes in constructing a RollOver.
There
is just one essential rule when creating images for a RollOver.
It is that all images used by a single RollOver should have
the same height and width.
The
importance of having the same height and width is so image
distortion does not take place. To demonstrate:
| |
Say
you have a 100x100 pixel image and when rolled over changes
to a 100x200 pixel image. What happens is the 100x200
pixel image will be squished down to fit in the 100x100
pixel area previously occupied by the first image. Probably
not the effect you were looking for! |
|
Page
Highlighting*
Each RollOver will use between 2-4 images. A regular RollOver
uses 2 images. An example would be the the gold bar from the
previous page.
There
are instances, though, that you'll want to use 4 images.
The 2 extra images are used for page highlighting.
Page
highlighting is a key element in navigation bars. It's main
use is for indicating the current page. The example site,
linked to above, implements page highlighting.
To
further explain, we'll take a look at the "Home"
RollOver from the example:
|
|
Image
|
Rollover
Image
|
|
Regular
Images
|
|
|
|
Highlighted
Images
|
|
|
As
you can see there are 4 distinct images, each representing
a distinct state of the RollOver.
The
"Regular Images" are used on every page except for
the page the RollOver is linked to. When the "Home"
page is inactive, it produces an effect that the "Home"
page is not the current page.
The
"Highlighted Images" are used only on the page the
RollOver is linked to. When the "Home" page is active,
it produces an effect that the "Home" page is
the current page.
Example:
*Page
Highlighting is not necessary for the creation of targeting
RollOvers. It's covered here only because we thought it was
too cool to leave out!
[
go to Previous
Page ] [ go
to Next Page ]
[
to top of page ]
|
