CSS Image Button Rollovers

To replicate the functionality of image rollovers made popular by Javascript using purely CSS, we simply do the following. First, take your normal and hover state images, and combine them into one image, by opening the two images in Photoshop and putting the normal state image on top and the hover state image on the bottom. This will double the height of your image but that will be fine.

What we will do is set the normal width and height of our element using CSS, followed by adjusting the Y position of the background image. What this means is that if we have a button with a height of 22 px and a width of 100 px, our new image will have a height of 44 px and a width of 100 px, and we will adjust the Y position of the background by -22 px. This has the same effect of switching one image with another, with the added bonus of the browser only downloading one image instead of two, making loading times faster.

Now that we've combined the normal and hover images, we will use the following CSS to mimic the image rollover effect:

.menubar #m1 {
   background-image: url("images/news.png"); width: 60px;
}
.menubar a:hover {
   background-position: 0 -20px;
}

To reduce code, we would have a <DIV> named .menubar, and within it would be several <A> elements. Each one would be 20px high normally (doubled to 4o with our new image) which we define once. Then, for each link within .menubar, we specify the name of the background image and the width of the image. Finally, our last rule tells the browser that every link inside of .menubar is moved 20px vertically when the mouse hovers.

CSS Attribute background-image and background

If you would like to load an image into your document without using the HTML <IMG> tag, you will create an element and set the background-image attribute. The background-image takes one argument, that being the URL to the image you would like to load. You don't want to do this for something like showing a picture of your puppy, you would instead use it for displaying images used by your layout. That is the philosophy of XHTML layouts. The code to use background-image is as follows:

#element-name {
    background-image: url("path/to/image.jpg");
}

That is the simplest method for loading your image using CSS, however you may want to be more specific. By default, loaded images will repeat over both the X and Y axis, starting in the upper left corner. So, to have more control, we use the CSS background attribute, examplified like below:

#element-name {
    background: transparent url("path/to/image.jpg") no-repeat top left;
}

The syntax for this is first the color (transparent / color name / color HEX), URL to the image, repeat method (repeat-x, repeat-y, no-repeat), and the two position values (top/bottom/middle/pixels, left/right/center/pixels),

Scaling images using CSS

If you would like to use an <IMG> tag to display your image, but use CSS to set the scaling of the image, you can use the following:

img#imgid {
    width: 100px;
    height: 200px;
}

Simply specifying the width and height of the image will force the image to be stretched to fit those bounds. But, what if you only know one of the attributes? Simply set the width or the height and the other one will be set by the browser to fit the width to height ratio of the original image. For example, if your original image is 100x200 pixels, and you set a width of 75px using CSS, the height will be set to 150px automatically and maintain the same ratio without stretching.

Thomas has contributed to dozens of enterprise Node.js services and has worked for a company dedicated to securing Node.js. He has spoken at several conferences on Node.js and JavaScript and is an O'Reilly published author.