View Single Post
Old 17-08-2004, 01:26 PM   #2 (permalink)
Iain
HEXUS.net Webmaster
 
Iain's Avatar
 
Join Date: Jul 2003
Location: UK
Posts: 3,112
Thanks: 1
Thanked 0 Times in 0 Posts
You can do this in CSS in a number of ways

1) Remove the image completely and use coloured backgrounds and borders to gain a pseudo-graphical effect
2) Use one big image as a background and then move it's x-y co-ordinates in CSS to give the illusion of a changed image e.g.

.button li a {
background: #ffffff url(http://www.site.com/image.gif) 121px 50% no-repeat;}
.button li a:visited {
background: url(http://www.site.com/image.gif) -865px 50% no-repeat;}
.button li a:hover {
background: url(http://www.site.com/image.gif) -381px 50% no-repeat;}

what this would do is given a div called button it would change the background by moving the background image to the left a set number of pixels depending on the state e.g. on hover it would go to -381px and so on.

Iain is offline   Reply With Quote