메뉴 건너뛰기

SONGGA

SONGGA-Material

홈페이지/HTML
2015.08.04 23:49

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

조회 수 332 추천 수 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아펠리아 Views101630
    read more
  2. 냉장고 적정온도는 얼마가 적당할까요?

    Date2019.08.06 Category도구/기계 By아펠리아 Views3
    Read More
  3. 자동차 타이어 보는법

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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