CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,104 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,048 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

CSS Image Rollovers

CSS Image Rollovers

Options

Dogstopper
Group Icon

30 Jul, 2009 - 02:27 PM

Post #1

Image Rollovers

All right, this tutorial is short and sweet but rather effective.
First you will need two different images to transition between; however, in CSS's case put them side-by-side and save it as the same single image , and it should be uploaded along with the rest of your site in the same directory as the html file.

HTML Code:

CODE

This creates a link that if CSS is enabled will make the rollover button, and if CSS is disabled, then it creates a very simple link to the same place.

Now, for the CSS

CODE

a.rollover {
    display: block;
    width: [i]width/2[/i]px;
    height: [i]height/2[/i]px;
    text-decoration: none;
    background: url("img1.png");
}

a.rollover:hover {
    background-position: -150px 0;
}

.displace {
    position: absolute;
        [i]Wherever you want the image[/i]
}

All we do is we set the button to only display the first half of the button until the user rolls over it with the mouse and then it displays only the second half.

See! I told you this tutorial was short and sweet. Best wishes!