Tutorial Author - Telos (http://forums.biorust.com/member.php?userid=15053)
| Downloaded from www.biorust.com on Sat Nov 21, 2009 09:42:39 |
| |
| Improved CSS Hover Images Tutorial Author - Telos (http://forums.biorust.com/member.php?userid=15053) |
NOTE: This tutorial assumes a basic familiarity with
CSS. If you have no idea how CSS
is laid out or
formulated, you may want to read our
Introduction to CSS
before proceeding.
You see a lot of hover effects on web nowadays. When you hover your mouse cursor over a link it usually changes
to something else - It doesn't matter if the link is an image or just text, there's usually some sort of hover effect in
place. If it's a graphical link the hover effect is usually another image displaying the hover effect. This image is
often
preloaded on page load so that the user sees the effect right away, but there's also
another way to do it. How about
using just one image and changing its state/position it with CSS? This is pretty simple trick
that I learned from the web some time ago. I haven't seen many tutorials about this,
so I decided to share it with you!
Before you can proceed, of
course, you need a graphical button designed in the usual way. If you don't have your own
you can use the one I'm using (Adobe Photoshop .PSD file),
or you can skip the image creation process altogether and use my
tutorial button instead.
My button is pretty simple, having one layer for the basic button graphics and another for the hover effect.
Now it's time to do some Photoshop magic. To make the effect work you need to
create a new image which has both states side-by-side.
To do this, simply double your canvas width and copy the images into the one
document so that they are side-by-side. To be perfectly honest it
really doesn't matter if the images are adjacent vertically or
horizontally... but for the rest of this tutorial we will assume the
horizontal method. If you need a visual example of what you are trying
to achieve, take a look at my pre-done
tutorial button - its fairly self explanatory!
Once you have
finished the image creation and saved it, its time to create the HTML and CSS. You won't
need to use the IMG tag at all - Just the A tag.
HTML
| <a id="my_button" href="#">my tutorial button</a> |
| <style type="text/css" media="all"> a#my_button:link, a#my_button:active, a#my_button:visited { display: block; width: 200px; height: 50px; background-image: url('csshover_buttons.jpg'); background-repeat: no-repeat; text-indent: -9999px; } a#my_button:hover { background-position: -200px; } </style> |
And that's it! Basically what you are doing in this code is creating an A tag set as wide and high as the
button, and then using the background-image property to assign the graphics to the
tag. You then make a hover CSS tag and move the background image with
background-position property to reveal the other image on the right side of your hover image.
A bit like a flip-book really! In this case we move the background
image 200px to the left (-200px).
You can see the CSS hover effect in action below:
And that's it! This method can also be amended to include different link states, but I'll leave that for you to figure out on your own! ;) If you have questions about this tutorial you can find me by the nickname Telos on the BioRUST Forums! Have fun!