How To Use One Icon From Different Image Files?

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 anothe

Solution 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;
}

Solution 2:

Use a selector, and change the a:active to the right image (you only linked to two)

a:link, a:visited {
    width: 16px;  
    height: 16px;  
    background-image: url(images/ui-icons_222222_256x240.png); 
    background-position: -32px -128px; 
}
a:hover {
    background-image: url(images/ui-icons_888888_256x240.png); 
}
a:active {
    background-image: url(images/ui-icons_888888_256x240.png); 
}

Solution 3:

You have to define the background-image for each icon-set (in this case three), and define the background-position for each icon that you are going to be using. (assuming the position of the icon is the same for the icon templates)

Also, I do not recommend you use the general link selector a, but assign a class for the icon buttons, as you might have other icon sets/links:

a.icon:link,
a.icon:visited

a.icon:hover

a.icon:active

Here is a sample of the general definition of the .icon class, and a button:

a.icon:link, a.icon:visited {
    width: 16px;  
    height: 16px;  
    background-image: url(images/ui-icons_222222_256x240.png);
}
a.icon:hover { background-image: url(images/ui-icons_888888_256x240.png); }
a.icon:active { background-image: url(images/ui-icons_454545_256x240.png); }

.button1 { background-position: 0px 0px }
.button2 { background-position: 16px 0px }
.button3 { background-position: 32px 0px }
/// etc.. for each button

To use an icon:

<a class="icon button1"></a>

Solution 4:

Just create another selector. In example:

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

a:hover
{
    background-image: url(images/ui-icons_888888_256x240.png); 
    background-position: -32px -128px;
}

And about the click event I am not 100% sure but I think that is the one

a:active
{
    background-image: url(images/ui-icons_CLICK_IMAGE_HERE_256x240.png); 
    background-position: -32px -128px;
}

Solution 5:

According to your sprite images you do this with a single sprite image.

like this:

a{    
    width: 16px;  
    height: 16px;  
    background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-icons_222222_256x240.png);
    background-position: -32px -128px; 
    display:block;
}

a:hover{
    opacity:0.5;
}

Check this http://jsfiddle.net/vERDH/3/

check this also How to make a single image, treated as three different images?