| Improved CSS Hover Images |
|
|
|
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> |
CSS
<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!
- Tutorial written by Telos
| 
There are no comments for this tutorial yet. You can place a comment by clicking here.
|

|
|
 |
F$%king IE6 and :hover Author: sirNemanjapro Posted: Sep 06th, 10:37pm Activity: 1 replies, 31 views
|  | Hello Everyone Author: rilus Posted: Sep 06th, 6:03am Activity: 0 replies, 46 views
|  | Test Your Color IQ Author: ddor Posted: Sep 05th, 10:39pm Activity: 8 replies, 114 views
|  | Embed font Author: Jacorre Posted: Sep 05th, 4:47am Activity: 6 replies, 105 views
|  | Basic rendering tutorial for Kerkythea Author: guppyman Posted: Sep 05th, 3:04am Activity: 0 replies, 64 views
|  | Darkroom in c4d Author: dj Mag Posted: Sep 03rd, 8:33pm Activity: 2 replies, 100 views
|  | Newb Author: ppom82 Posted: Sep 03rd, 8:25pm Activity: 2 replies, 103 views
|  | MP3 Editor Needed Author: notjustgraphics Posted: Sep 03rd, 5:58pm Activity: 8 replies, 113 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 210 |
| Total Downloads: | 406 |
| Linkbase Links: | 255 |
 |
|
 |
 |
|