Graphicalwonder - Shane Perran's SharePoint Customization Blog

« ASP.NET and VS2005: 15 Instructional Videos | Main | SharePoint Customization: Office and SharePoint Registry Customization »

February 03, 2006

CSS: Create Image Rollovers using CSS

Here is one way you can use CSS to create image rollovers:

Overview from Christian Montoya

This is a pure CSS image rollover that works for image tags. Remember how you used to do them with javascript?

I’m partial to using image tags for navigation rather than crazy new-fangled image replacement techniques (pharner and etc), I was thinking of an easy way to do an image rollover effect.

The premise is simple: Enclose the image in a block level element with a defined size, and then change the positioning of the image when that block level element is hovered over, much like you would change the background positioning for background rollovers. The implementation is simple too.

Here’s the setup:

The left half of the image is what I want to display, and the right half of the image is what I want to show on hover. It’s 200 pixels wide and 50 pixels high, so the CSS to make the technique work is:

a { display:block; height:50px; width:100px; overflow:hidden; }

a:hover { display:block; text-indent:-100px; }

So I make the tag a block level element and give it a height equal to the image and a width equal to half the image, and I apply overflow:hidden so you can’t see the other half, and then in the :hover all I have to do is set the text-indent to half the image width so the image moves left and you can see the other half. That’s it.

Browser compatibility:

* IE 5.5+
* Firefox 1.07+
* Opera 7.23+
* Mozilla 1.7.12
* Netscape 6.02+

Problems with this technique: When the image degrades to alt text, the text will move left on hover, and probably dissappear. Not a complete usability problem, but a problem nonetheless. If you would prefer the javascript route, check out unobtrusive javascript image rollovers.

Keep in mind, though, that the javascript technique requires image preloading to prevent a delay, and uses two images, whereas the CSS technique needs only 1 image to load.

Visit Christians Blog/Site

Posted by Shane at February 3, 2006 11:41 AM

Trackback Pings

TrackBack URL for this entry:
http://www.graphicalwonder.com/cgi-bin/mt-tb.cgi/297

Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Graphicalwonder - Shane Perran's SharePoint Customization Blog

February 03, 2006

CSS: Create Image Rollovers using CSS

Trackback Pings

Comments

Post a comment