CODEWITHSUNDEEP
jqueryhtmlcss
LA_
LA_

Reputation: 20429

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

Upvotes: 0

Views: 3661

Answers (6)

Wex
Wex

Reputation: 15715

Your best way is to treat it as any other semantic element, and then just style it as a button.

HTML:

<a class="icon icon-travel" href="/travel">Travel Offers</a>

CSS:

a.icon {
    background: none 0 0 no-repeat;
    width: 16px;  
    height: 16px;  
    text-indent: -10000px;
    display: inline-block; }
a.icon-travel {
    background-image: url(images/ui-icons_222222_256x240.png);
    background-position: -32px -128px; }
a.icon-travel:hover { background-image: url(images/ui-icons_888888_256x240.png); }

Upvotes: 1

sandeep
sandeep

Reputation: 92843

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?

Upvotes: 1

Samuel Liew
Samuel Liew

Reputation: 79113

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>

Upvotes: 2

Marco Johannesen
Marco Johannesen

Reputation: 13134

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

Upvotes: 3

KodeFor.Me
KodeFor.Me

Reputation: 13521

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

Upvotes: 1

David Thomas
David Thomas

Reputation: 253486

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

Upvotes: 3

Related Questions