Home/ Questions/Q 3396382
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T04:24:04+00:00

What is the best way to create an HTML image that displays various states

  • 0

What is the best way to create an HTML image that displays various states (e.g. for a button: normal, hovered, selected, disabled)?
Ideally, I want to do via CSS classes (including the :hover meta-class).

Also, I’ve seen multiple states combined into a single image (which makes image pre-loading easier), but I don’t know how to display a single slice of the image as needed.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume you are talking about CSS Sprites. Here’s a A List Apart article to get you started: http://www.alistapart.com/articles/sprites. The basic idea is that you have all of your images combined into a single, large image.

    Whereas normally you will have img tags or small elements with background image applied, now you have the single image applied to multiple elements as a background image, and each of them have different background position values to position the correct image into position. An example of this would be jQuery UI’s icons – the single combined image look like this:

    alt text

    Then each of the individual icons share a single class, with a backgroun-image set: 

    .ui-icon{width:16px;height:16px;background-image:url(../images/ui-icons_808080_256x240.png);}

    As well as individual background-position for each of the different icons: 

    .ui-icon-carat-1-n{background-position:0 0;}
.ui-icon-carat-1-ne{background-position:-16px 0;}
.ui-icon-carat-1-e{background-position:-32px 0;}
.ui-icon-carat-1-se{background-position:-48px 0;}

    The same can be done for the individual interactive states – change the background-position of the element on :hover, and you get a different color or icon.

    • 0