1. Tutorio.com
Subcategories: View All Announcements. Clientside. Flash. Marketing-SEO. Photoshop. Serverside.
In this tutorial you will learn how to transform an ordinary link into a button with image rollovers using
nothing but css.
Introduction
Example: Rollover Buttons with pure CSS.
View Rollover Example
(*edit* actually I found out that the buttons do 'sometimes' flicker in IE )
Normally image rollovers involve replacing one image with another, when the mouse is moved over the button. This causes a problem because the new image
has need to be loaded when the mouse is moved over the button. The delay between the time the mouse is moved over the button and when the image is loaded
results in a flicker.
The traditional method of solving this is to preload all the images using bulky javascript.
A better solution is available through css, it involes putting all three states of a button (normal, hover, hit) on one image, and then simply moving the image
around
(x)HTML Markup
Create a menu using the following HTML
<div class="rollover">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>
The HTML markup is very simple, its just a bunch ordinary links inside a div tag with the class rollover.
Creating the image
The first step is to creating a button is to create a background graphic for the button in an image editor such as photoshop.
Divide the image up into three equal sections, one for each state of the button.
Normal (what the button looks like normally )
Hover (this will be used when the image is rolled over.)
Hit (this will be used when the mouse is clicked.)
The CSS
At this point all you have is a bunch of links and an image, what really ties this together is CSS 2
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
Pure CSS Image Rollovers
jumpchart.com Ads by Google
Page 1 of 2Pure CSS Image Rollovers
8/16/2010http://www.tutorio.com/tutorial/pure-css-image-rollovers

2. The important thing to notice here is image that you created is used as a background for the links. The background is then positioned on a:hover (on rollover), and
on a:active (on click)
My image was 105 pixel high and divided up into blocks of 35px each. So the background is positioned at -35px on rollover (a:hover) to move it up by 35 pixels. I
change the background position, on a:active to move it up by -70px so that only the bottom part of the image is seen
Also notice the padding values, and the width these will vary from image to image
Tip: If you want to create a horizontal navigation instead of a vertical one have a look at this thread.
Rating(556) + -
Chaotic Fire Flames
Javascript Bubbles
XMPlay Icon
Making Fit Different Screen Resolutions
Using Photoshop Move Tool: Complete Reference
Tutorio.com. Privacy Policy, Contact
More Tutorials
Page 2 of 2Pure CSS Image Rollovers
8/16/2010http://www.tutorio.com/tutorial/pure-css-image-rollovers