HTML/CSS圖像導航欄

Question

我正在爲我的網站製作導航欄。導航欄是一張圖片，我想知道是否可以在CSS中分割圖片的部分以鏈接到不同的頁面。這可能嗎？如果是這樣，怎麼樣？

地圖標記建議工作完美。謝謝！

Answer 1

您可以使用HTML映射標籤，看http://www.w3.org/wiki/HTML/Elements/map

Answer 2

兩種不同的方式做你想要什麼：

• 一個image map（並沒有真正使用CSS，雖然），或

• 使用正確的HTML markup+CSS sprites，是這樣的：

  <ul class="nav"> 
      <li><a href="foo">Foo</a></li> 
      <li><a href="bar">Bar</a></li> 
      <li><a href="baz">Baz</a></li> 
  </ul> 
  

並將其與CSS background-position結合使用。

Answer 3

您應該嘗試使用CSS圖像精靈http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/進行導航。或者你可以使用圖像映射，但我認爲CSS sprites是一個更現代和標準的方法來做到這一點。