이미지 바꿔치기_접근성이 뛰어난 이미지탭 롤오버

-----------------------------------------------------------------------
<style type="text/css">
#nav {
margin:0;
padding:0;
height:20px;
list-style:none;
display:inline;
overflow:hidden;
}

#nav li {
margin:0;
padding:0;
list-style:none;
display:inline;
}
#nav a {
float:left;
padding:20px 0 0 0;
overflow:hidden;
height:0;
height:20px; /*IE5*/
}
#nav a:hover {
background-position::0 -20px;
}
#nav a:active, #nav a.selected {
background-position:0 -40px;
}

#thome a {
width:40px;
background:url(home.gif) top left no-repeat;
}
</style>

<ul id="nav">
 <li id="thome"><a href="#" class="selected">Home</a></li>
 <li id="tguide"><a href="#">Guide</a></li>
 <li id="tmag"><a href="#">Magazine</a></li>
 <li id="tarchives"><a href="#">Archives</a></li>
</ul>
-----------------------------------------------------------------------