CSS Rollovers

This code is quite simple, once you get the hang of it, what it is basically, is 2 images as a background image, you basically cutting the a tag in half, which means if you have and image that the total height of it is 200, than your height would be 100, and the width would be the same as the background image, and when your not rolled over it, its showing the top left of the background image, and when you rollover it shows the bottom left of the background image, you can find a working example on my profile, in the extended network section.


once you put the code in the your profile you put this code, where ever you want it to go






heres an example of an image

<style type="text/css"> .name{height: XXXpx; width: XXXpx; overflow: hidden; background: url(IMGE_URL_HERE) top left no-repeat; display: block;} .name:hover{background-position: bottom left;} </style>

yeah for some reason it isnt working for me. to test it i used a 200X 100 black and white rectangle. but when i put it on my myspace, nothing shows up .help plz?

Works fine.

Author	Loudsur13
Submitted on	Jul 21, 2006
Page views	100,496
Favorites	71
Comments	2

image rollovers, css rollovers, image behaviors