Now being one myself, I'm pretty sure that all web
designers at some point in their designs life has wanted to
make one image change to another when the mouse is rolled
over (generally used with links). The most generic way of
achieving this is to use JavaScript and there are plenty of
tutorials around. But you (if you're anything like me) gets
stuck somewhere in the tutorial, skips straight to the end
to get the code and then just copy and paste into your
website. Now with this working and all, you don't understand
why it works. Or if anything goes wrong how can you fix it?
CSS rollovers are much more simple and don't require
anything except CSS and HTML (not even for preloading).
This tutorial will take you through how to make anchor
tags into linked pictures and then the picture changing when
the mouse is on top of the image.
This is an example of what I'm about to show you how to
do:
[ move your
mouse over to change the image]
Here is How
The following steps will explain how you can achieve this
effect.
-
Open up the HTML document you want a CSS
rollover in (or use this HTML code if you just want to
experiment with the effect):
- <html>
- <head>
- <title>CSS
Rollovers</title>
- <style
type="text/css">
- @import
"rollover.css";
- </style>
- </head>
-
- <body>
- <div>
- <a
href="#"
id="example">Home</a>
- </div>
- </body>
- </html>
-
You don't need to worry about any of
that code (you should easily understand it all anyway)
apart from the anchor tag and what's inside the style
tag.
- Save your HTML file.
-
Open up FrontPage/DreamWeaver/Notepad
(whatever you prefer to use) and paste this CSS:
- #example{
- height:
20px;
- width:
158px;
- text-indent:
10000px;
- overflow:
hidden;
- background:
url(kirupa1.gif)
top
left no-repeat;
- display:
block;
- }
-
- #example:hover{
- background-position:
bottom left;
- }
-
For the sake of this tutorial, call the
file rollover.css and save it in the same directory as
your HTML file.
-
Now this is where this differs majorly
from using JavaScript. For a rollover you have two
images, one for the original state and one for the
rollover state. When using CSS rollovers you need to put
both images in the same image, like so:
[ both rollover states in
one image ]
- Save that image as kirupa1.gif in the same directory
as the HTML + CSS files. Then view your HTML file and
voila!
Now...time to go through that code!
-
#whatever is referring to an id called
whatever, same as classes but should only be used once
on a HTML document.
-
The dimensions of kirupa1.gif are 158px
by 40px. But as half of that height is an image we don't
want to see (yet), we set the height to 20px, and later
on we set the background-position to top.
-
For browsers that can't view CSS (yes, I
know...) you should always include some text in-between
the open and close anchor tags. For those browsers that
can view CSS we need to get rid of that text. So we set
the text-indent to some huge number and set the overflow
as hidden. Self explanatory.
-
The last two lines in the #example {}
simply called the background image, telling it to place
itself at the top and also not to repeat itself.
-
Next is the #example:hover -- the hover
is basically saying when the mouse is over this element
style it like so.
- All this does is change it from showing the top
20pixels to showing the bottom 20pixels, effectively
switching the images.
Well done! You have successfully created some pure CSS
rollovers! It is much simpler than using JavaScript, and
because it's not needing to load a second image when the
mouse rolls over you have no need to use JavaScript to
preload the image.
 |
Compatibility Note
|
|
As I'm sure you
all know IE, Firefox and Opera all run on
different engines. FF and Opera, by default,
display CSS background images to the left,
but IE doesn't. So we have to add the left
in each of the positioning bits of the CSS
so that IE will align it within the area we
specified. If it isn't then the image
doesn't show up, the reader thinks there's
not a link there but gets confused when the
empty bit of space sends him to another page
^_^ |
|
If you find any problems with this tutorial, or you want
help with this effect don't be afraid to PM me or just post
on the forum.
Thanks! =)
CSS
Rollovers
