Page 1 of 1

CSS Image Rollovers Rate Topic: -----

#1 Dogstopper   User is offline

  • The Ninjaducky
  • member icon

Reputation: 2972
  • View blog
  • Posts: 11,223
  • Joined: 15-July 08

Post icon  Posted 30 July 2009 - 03:27 PM

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:
<a href="[i]link location[/i]" class="rollover" title="link"><span class="displace">Link</span></a>

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
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!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1