Roller tips and tricks: image rollover using CSS

Second post in the Roller tips & tricks Series... as a side note, they are already (too) many webpages out there to teach you how to make image rollover's using CSS, and my intention is not to make yet another similar post. But, as I was searching myself for such info, the top pages returned by Google all --sorry, I admit, I did not follow much links after Page 1 but who does anyway?-- describe a technique of using a background image which is imho very cumbersome --you would need to create a distinct CSS class for each distinct image! So I ended up going back to the CSS Specs to learn enough to be able to write this stuff below. Hope it helps!

How do create (non-background) image rollover using CSS?

When you move the mouse over the images in the Download section of the sidebar, the image changes and shows the text "Get it Now". Here is how it works.

First, you need to save into the same image file, the 2 states of the image. What you see in the sidebar is actually only half of the images, which look like this in fact :

It is 340 pixels long but you see only half of it. The right side of it when the mouse pointer is on it, the left side of it otherwise.

Second, you need to add the following lines to your blog's stylesheet. They define the class rollover for the <a> HTML element --such a tag will be used to embed the rollover images-- that causes the browser to stop displaying the hyperlink content past a width of 170 pixels. In addition, when the mouse focus is on an image inside the <a> tag, the image is shifted left by 170 pixels before being displayed in the 170px-wide box. That's the roll-over effect.

a.rollover {display:block;width:170px;overflow:hidden;}
a.rollover:hover img, a.rollover:focus img, a.rollover img.hover {margin-left: -170px;}

Lastly, you make use of this rollover style in your HTML blog templates as follows. Every link can have a distinct image, unlike with the background image technique that hard-codes the image file in the stylesheet.

<a href="http://www.sun.com/software/products/mysql/getit.jsp" class="rollover"><img src="http://www.sun.com/images/e19/e19_mysql.gif" width="340" height="40" alt="Download MySQL" /></a>
<a href="http://www.sun.com/software/solaris/get.jsp" class="rollover"><img src="http://www.sun.com/images/e19/e19_solaris.gif" width="340" height="40" alt="Download Solaris" /></a>
<a href="http://www.opensolaris.com/get/" class="rollover"><img src="http://www.sun.com/images/e19/e19_opensolaris.jpg" width="340" height="40" alt="Download OpenSolaris" /></a>
etc...

The sun.com webmasters have created a bunch of those 340x40-pixel images to be used as download buttons. You can view them all here. As a concluding remark, I did try first to attach the rollover style directly to the <img> element but did not succeed to get the intended behavior. Would some of you readers know whether it is possible and how? I'm interested to know.

Comments:

Hello, I was developing my website and I came up with the same solution. I made asimilar tutorial about it,just in case you want to check it out:

http://themesquirrel.net/css-rollover-images-using-only-one-image-file/

Posted by ThemeSquirrel on September 04, 2009 at 10:54 AM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

How open innovation and technology adoption translates to business value, with stories from our developer support work at Oracle's ISV Engineering.

Subscribe

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
5
6
8
9
10
11
12
13
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today
Feeds