[css] css 메뉴 이미지 롤오버 효과
페이지 정보

본문
<style type="text/css">
#menu a img.menuon {
display: none;
}
#menu a img.menuoff {
display: inline;
}
#menu a:hover img.menuon {
display: inline;
}
#menu a:hover img.menuoff {
display: none;
}
</style>
<!-- ... 중략 ... -->
<ul id="menu">
<li>
<a href="menu1.html">
<img src="menu1_off.png" class="menuoff" alt="메뉴1">
<img src="menu1_on.png" class="menuon" alt="메뉴1">
</a>
</li>
<li>
<a href="menu2.html">
<img src="menu2_off.png" class="menuoff" alt="메뉴2">
<img src="menu2_on.png" class="menuon" alt="메뉴2">
</a>
</li>
<li>
<a href="menu3.html">
<img src="menu3_off.png" class="menuoff" alt="메뉴3">
<img src="menu3_on.png" class="menuon" alt="메뉴3">
</a>
</li>
</ul>
#menu a img.menuon {
display: none;
}
#menu a img.menuoff {
display: inline;
}
#menu a:hover img.menuon {
display: inline;
}
#menu a:hover img.menuoff {
display: none;
}
</style>
<!-- ... 중략 ... -->
<ul id="menu">
<li>
<a href="menu1.html">
<img src="menu1_off.png" class="menuoff" alt="메뉴1">
<img src="menu1_on.png" class="menuon" alt="메뉴1">
</a>
</li>
<li>
<a href="menu2.html">
<img src="menu2_off.png" class="menuoff" alt="메뉴2">
<img src="menu2_on.png" class="menuon" alt="메뉴2">
</a>
</li>
<li>
<a href="menu3.html">
<img src="menu3_off.png" class="menuoff" alt="메뉴3">
<img src="menu3_on.png" class="menuon" alt="메뉴3">
</a>
</li>
</ul>
관련링크
댓글목록

하현준우사랑님의 댓글
하현준우사랑 작성일오... 소스가 간단해지고 좋네요. 유용한 정보 감사합니다.

계절을안고서님의 댓글
계절을안고서 작성일소중한 팁 공유 감사드립니다.

바람나라님의 댓글
바람나라 작성일좋은 소스 감사합니다
