Question

Here is the set of icons within one image file. And here is another set.

How can I create a link (a href) with usage of icon from one file, on hover it should take icon from another file (the same position) and on click – from third file?

Here is the CSS just to use one icon:

width: 16px;  
height: 16px;  
background-image: 
url(images/ui-icons_222222_256x240.png); 
background-position: -32px -128px; 

Answer 1

All you have to do is define styles for the different states of the link(s):

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}