메뉴 건너뛰기

SONGGA

SONGGA-Material

홈페이지/HTML
2015.08.04 23:49

css의 background-position으로 롤오버 구현

조회 수 325 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

마우스오버 버튼

 마우스 커서(cursor)를 올렸을 때 이미지가 변하는 버튼

 

 

방법 1 두개의 이미지를 사용

 

이미지에 마우스를 올렸을때 다른 이미지가 보이는 방법으로

:hover  가상 클래스를 사용하여 구현

 

예1)

 

2.jpg

 

 

CSS

 

a.mButton{
  display:block; 
  width:버튼의 가로길이px;
  height:버튼의 세로길이px;
  background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
  background:url(마우스오버 때 보여질 이미지 경로) no-repeat;
}
a.mButton span{
  display:none;
}

 

HTML

<a href="링크주소" class="mButton"><span>마우스오버버튼</span></a>

 

 5.jpg

 

                  background-position의 기본값은 0, 0 

 

단점 : 두 개의 이미지를 사용하면 마우스를 올렸을때 이미지 로딩의 시간차가 발생

 

 

--------------------

 

방법 2 두개의 이미지를 하나로 만들어 사용

 

평상시 배경과 롤오버시 배경을 하나로 만든다.

nav.png

 

 

***  일반 버튼과 마우스 오버 버튼의 너비와 높이의 사이즈는 동일해야 합니다.

 

CSS

a.mButton{
  display:block; 
  width:버튼의 가로길이px;
  height:버튼의 세로길이px;
  background:url(기본 버튼 이미지 경로) no-repeat;
}
a:hover.mButton{
  background-position:0 -버튼의 세로길이px;
}
a.mButton span{
  display:none;
}

 

HTML

<a href="링크주소" class="mButton"><span>마우스오버버튼</span></a>

naviend.jpg

 

 

 

 

 

---------------------------------

참고

top left and left top 
Same as '0% 0%'.
top, top center, and center top 
Same as '50% 0%'.
right top and top right 
Same as '100% 0%'.
left, left center, and center left 
Same as '0% 50%'.
center and center center 
Same as '50% 50%'.
right, right center, and center right 
Same as '100% 50%'.
bottom left and left bottom 
Same as '0% 100%'.
bottom, bottom center, and center bottom 
Same as '50% 100%'.
bottom right and right bottom 
Same as '100% 100%'

------------------------------------------------------

 

 

 

예2)

 

1.jpg

 

 

 

CSS

#nav li {list-style:none; float:left;}
#nav{background:url("nav.png") no-repeat; height:38px; width:876px; padding:0; margin:0 auto }
/*#nav span{display:none}*/

#nav span{position:relative; z-index:-1}
#nav a{display:block; height:38px}
#list1{width:112px}
#list2{width:120px}
#list3{width:128px}
#list4{width:125px}
#list5{width:137px}
#list6{width:131px}
#list7{width:123px}

#list1 a:hover{background:url("nav.png") 0px -38px no-repeat;}
#list2 a:hover{background:url("nav.png") -112px -38px no-repeat;}
#list3 a:hover{background:url("nav.png") -232px -38px no-repeat;}
#list4 a:hover{background:url("nav.png") -360px -38px no-repeat;}
#list5 a:hover{background:url("nav.png") -485px -38px no-repeat;}
#list6 a:hover{background:url("nav.png") -622px -38px no-repeat;}
#list7 a:hover{background:url("nav.png") -753px -38px no-repeat;}

HTML
  <ul id="nav">
  <li id="list1"><a href="#"><span>Apple</span></a></li>
  <li id="list2"><a href="#"><span>Store</span></a></li>
  <li id="list3"><a href="#"><span>Mac</span></a></li>
  <li id="list4"><a href="#"><span>iPod + iTunes</span></a></li>
  <li id="list5"><a href="#"><span>iPhone</span></a></li>
  <li id="list6"><a href="#"><span>Downloads</span></a></li>
  <li id="list7"><a href="#"><span>Support</span></a></li>
 </ul>

 

결과 >

 

6.jpg

 

 

 

 

#nav span{display:none}을 쓰게 되면, 이미지가 없을때 대체 텍스트가 안보이게 되므로

#nav span{position:relative; z-index:-1}로

바꿔주어 이미지가 표시되지 않는 경우에도 대체텍스트가 제공되어 접근성이 보장되도록 코딩한다.

 

 

 


  1. 설치및 자료받는 방법 : 파일 전송 프로토콜 - CuteFTP Professional

    Date2008.10.19 Category공지사항 By아펠리아 Views101612
    read more
  2. 자동차 타이어 보는법

    Date2018.11.29 Category자동차/운전면허 By아펠리아 Views13
    Read More
  3. 홍삼 부작용, 잘 알고 먹어야 합니다.

    Date2018.05.31 Category건강 By아펠리아 Views13
    Read More
  4. 화장품 유통기한

    Date2017.06.23 Category화장품 By아펠리아 Views38
    Read More
  5. 화장품이 골동품 되기 전에 사용해라. - Time to throw out.

    Date2017.06.09 Category화장품 By부자사랑 Views39
    Read More
  6. 애플 펜슬 지원되는 아이패드 프로 9.7을 구입했다.

    Date2017.02.24 Category도구/기계 By아펠리아 Views331
    Read More
  7. 비행기 탈 때만 ‘비행기 모드’? 천만에!

    Date2017.02.09 Category도구/기계 By아펠리아 Views614
    Read More
  8. 마이그레이션 이용방법 (데이터 백업및 복구)

    Date2016.10.27 Category제로보드 By아펠리아 Views136
    Read More
  9. 귀에 양파 한 조각을 넣어봅니다. 이내 믿을 수 없는 일이 일어납니다.

    Date2016.02.01 Category건강 By아펠리아 Views215
    Read More
  10. 이중주차, 함부로 밀지 마세요.

    Date2016.01.21 Category자동차/운전면허 By아펠리아 Views567
    Read More
  11. 인터넷 익스플로러 새창이 계속 떠요ㅠ

    Date2016.01.18 CategoryWindows By아펠리아 Views1087
    Read More
  12. css의 background-position으로 롤오버 구현

    Date2015.08.04 Category홈페이지/HTML By아펠리아 Views325
    Read More
  13. 홈페이지 div 레이아웃할때

    Date2015.08.03 Category제로보드 By아펠리아 Views677
    Read More
  14. 진주가루 ( Pearl Powder)

    Date2014.05.09 Category창업/사업 By아펠리아 Views1394
    Read More
  15. 터키석,Turkish (turquoise,터쿼이즈)

    Date2014.05.08 Category건강 ByChangjunSong Views1569
    Read More
  16. 로그인 전 과 후 다르게 표현

    Date2014.03.08 Category제로보드 By아펠리아 Views1008
    Read More
  17. nginx 에서 서브도메인 사용시 로그인유지방법

    Date2014.03.08 Category제로보드 By아펠리아 Views1201
    Read More
  18. 충북 청원군 읍·면 일제강점기 이름 바꾼다

    Date2013.12.25 Category기타 By아펠리아 Views1899
    Read More
  19. 충북(忠北) 청원군(淸原郡)

    Date2013.12.25 Category기타 By아펠리아 Views2082
    Read More
  20. 언어선택옆에 언어별국기 출력하기

    Date2013.12.15 Category제로보드 By아펠리아 Views1587
    Read More
  21. 레이아웃설정에 언어팩추가하기

    Date2013.12.15 Category제로보드 By아펠리아 Views1680
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6
위로