padding을 이용하여서 메뉴 만들기
다음과 같이 이미지를 만들어서
기존에는 위에 이미지를 ,
마우스 오버시 밑에 이미지를 보여주게 하고 싶어요.
가능할까요?
padding을 교묘하게 이용하면 될것같은데
제가 해보니 잘 안되네요.
제가 해본 소습니다.
틀린부분 고쳐주세용
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
li {list-style:none;}
img {border:none;}
#menu {margin:10px; width:1004px; height:38px;}
#menu li {float:left; height:38px;}
.notice {background: url(./images/menu_notice.png); height:38px; width:80px;}
.community {background: url(./images/menu_community.png); height:38px; width:78px;}
.webstudy {background: url(./images/menu_webstudy.png); height:38px; width:77px;}
.blog {background: url(./images/menu_blog.png); height:38px; width:59px;}
.notice a:hover {padding-top:-38px;}
</style>
<div id="menu">
<li><a href="#"><div class="notice"></div></a></li>
<li><a href="#"><div class="community"></div></a></li>
<li><a href="#"><div class="webstudy"></div></a></li>
<li><a href="#"><div class="blog"></div></a></li>
<li><img src="images/menu_bg.png" /></li>
</div>
댓글 5개
자세한건 아랫분이...ㅌㅌㅌ
background-position:0 -192px;
.community li a:hover{background: url(./images/menu_community.png) bottom no-repeat}
<img src='menu1_off.gif' onmouseover="this.src='menu1_on.gif';" onmouseout="this.src='menu1_out.gif';"> 하는게 간단할거같은데요~
#menu a:hover div { background-position: left bottom; }
추가해 주세요.
IE7에서 확인했습니다.
그리고 css 메뉴는 다음을 참고 하세요.
http://www.alistapart.com/articles/slidingdoors/