如何使用不同圖像文件中的一個圖標？

Question

Here是一個圖像文件內的圖標集。而here是另一組。

如何使用一個文件中的圖標創建鏈接（a href），將鼠標懸停在應該從另一個文件（相同位置）獲取圖標並單擊 - 從第三個文件？

這裏是CSS只是使用一個圖標：

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

Answer 1

所有你需要做的就是定義樣式的鏈接（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; 
} 

Answer 2

你必須爲每個圖標集（在這種情況下爲三個）定義背景圖像，而爲將要使用的每個圖標定義背景圖位置。 （假設圖標的位置是一樣的圖標模板）

另外，我不建議你使用一般的鏈接選擇a，但指定一個類的圖標按鈕，因爲你可能有其他圖標套/鏈接：

a.icon:link, 
a.icon:visited 

a.icon:hover 

a.icon:active 

這裏是.icon類的一般定義的樣本，以及按鈕：

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 

要使用的圖標：

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

Answer 3

只需創建另一個選擇器。在例如：

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

約在單擊事件我不是100％肯定，但我認爲這是一個

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

Answer 4

使用選擇，並改變一：主動右圖像（你只鏈接到兩個）

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

Answer 5

根據你的精靈圖像，你可以用一個精靈圖像做到這一點。

這樣的：

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

入住這http://jsfiddle.net/vERDH/3/

檢查，這也How to make a single image, treated as three different images?

Answer 6

你最好的辦法是把它當作任何其他語義元素，然後只是樣式它作爲一個按鈕。

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