如何將圖像用於活動和懸停鏈接？

-2

我正在嘗試創建一個導航菜單，使圖像從其他圖像更改爲顯示其在特定頁面上。它將與懸停項目一樣。我不確定最好的解決方案是什麼，在搜索時我完全困惑，因爲我應該如何去做這件事。我在html中的菜單是這樣設置的。如何將圖像用於活動和懸停鏈接？

<ul id="main-nav"> 
    <li id="list-1" class="item1"><a href="#"><img src="images/nav1_0.png"></a></li> 
    <li id="list-2" class="item2"><a href="#"><img src="images/nav2_0.png"></a></li> 
    <li id="list-3" class="item3"><a href="#"><img src="images/nav3_0.png"></a></li> 
    <li id="list-4" class="item4"><a href="#"><img src="images/nav4_0.png"></a></li> 
    <li id="list-5" class="item5"><a href="#"><img src="images/nav5_0.png"></a></li> 
    <li id="list-6" class="item6"><a href="#"><img src="images/nav6_0.png"></a></li> 
    </ul>

我以爲我應該使用背景圖像，但是我怎麼會添加鏈接到li元素中沒有內容的菜單？

來源

2013-06-05 Alex Howell

在您的錨定標籤上設置背景圖片 – Turnip

想要發佈一些CSS？另外，如果你設置了一個集成了代碼的jsfiddle，那就太好了。 – Supplement

您可以將<a>標記的顯示更改爲阻止並指定所需的大小以匹配背景圖像的大小。我也建議使用一個精靈作爲背景圖片，然後改變背景位置。

全部放在一起：

#main-nav li a { 
    display: block; 
    /* in this example I am using width of 50px and height of 20px for the background image */ 
    width: 50px; 
    height: 20px; 
    /* note: nav.png is assumed to be name of new sprite */ 
    background-image: url('images/nav.png'); 
} 

/* There assume sprite is horizontally arranged (i.e. 300px wide by 20px high) */ 
#main-nav li.item1 a { 
    background-position: 0px 0px; 
} 

#main-nav li.item2 a { 
    background-position: -50px 0px; 
} 

... 

#main-nav li.item6 a { 
    background-position: -250px 0px; 
}

如果你想有一個懸停狀態，你可以添加到你的精靈，以及通過增加圖像的第二行以你的精靈（即使得它採用300 x 300像素到40像素的這個例子）。並添加這樣的規則：

#main-nav li.item1 a:hover { 
    background-position: 0px -20px; 
} 

#main-nav li.item2 a:hover { 
    background-position: -50px -20px; 
} 

... 

#main-nav li.item6 a:hover { 
    background-position: -250px -20px; 
}

精靈是一個關鍵的概念，你應該在這裏學習。單個組合圖像比單個圖像小，並且需要瀏覽器需要更少的整體輔助請求。這意味着對於具有懸停條件的背景圖像，您需要單個圖像下載而不是12個。

來源

2013-06-05 21:48:01

如何將圖像用於活動和懸停鏈接？

回答

相關問題