如何使用可點擊的圖像進行導航？

Question

我需要爲網站做導航。它使用圖像而不是文本。文字被隱藏。當然，導航是爲了在頁面中導航而創建的。我創建了導航，但我無法點擊它。我認爲這是因爲文本被「推到左邊」（隱藏換句話說），但沒有文本 - 沒有鏈接 - 沒有點擊。任何想法如何解決它？

HTML：

<div id="navigation"> 
    <ol> 
     <li class="home"><a href="home">Home</a></li> 
     <li class="services"><a href="services">Services</a></li> 
     <li class="gallery"><a href="gallery">Gallery</a></li> 
     <li class="ourClients"><a href="our-clients">Our Clients</a></li> 
     <li class="aboutUs"><a href="about-us">About Us</a></li> 
     <li class="contactUs"><a href="contact-us">Contact Us</a></li> 
    </ol> 
</div> 

CSS：

#navigation { 
    background: url("images/navigation.png"); 
    height: 80px; 
} 

#navigation li { 
    float: left; 
    height: 30px; 
    margin: 0 60px 0 0; 
    text-indent: -9999px; 
} 

#navigation li.home { 
    background: url("images/navigation_home.png"); 
    width: 54px; 
} 

#navigation li.services { 
    background: url("images/navigation_services.png"); 
    width: 61px; 
} 

/* And so on like 'li.x'. */ 

Answer 1

圖片傳達的信息是內容，而不是呈現或背景。使用<img>元素。

<li class="home"><a href="home"><img src="images/navigation_home.png" alt="Home"></a></li> 

Answer 2

你需要做的鏈接a填補li即使縮進文字，那麼還有比（隱藏）文本點擊以外的東西;）

#navigation li a {  
    display: block; 
    height: 30px; 
}