이미지를 미리 불러올(Preload) 필요가 없는 CSS Image Rollover
이미지를 미리 불러올(Preload) 필요가 없는 CSS Image Rollover
출 처 : http://wellstyled.com/css-nopreload-rollovers.html실행가능한 브라우저 : cross-browser css라지만, IE에서만 테스트했음.
소 개
아시다시피 메뉴의 보통 상태(a)와 마우스를 올려 놓은 경우(a:hover), 클릭할 경우(a:active) 등에 따라 해당 메뉴가 다른 이미지로 바뀌는 것을 이미지 롤오버라고 부릅니다.
자바스크립트를 이용해 이를 구현하려면, 한 메뉴에 대해 세 개의 이미지(보통상태와 마우스가 올려진 상태만을 처리하는 경우가 대부분이죠.)가 필요하고 페이지가 생성될 때에는 해당 이미지를 미리 불러오도록 처리하여야 합니다.
여기 소개하는 CSS Image Rollover는 이와 전혀 다른 방법으로 같은 효과를 얻어냅니다.
메뉴의 세가지 상태에 해당하는 부분을 일렬로 한 개의 이미지로 만든 다음(아래의 이미지), css속성인 background-image의 위치(background-position)를 이용하여, 메뉴의 상태에 따라 이미지의 해당 부분을 보여주는 것입니다. 일종의 트릭이라 할 수 있겠네요.
적용예
- <style type="text/css">
- #menu a {
- display:block;
- width:120px;
- margin: 1em 0; padding:7px 0 10px 20px;
- font: bold 14px/1 sans-serif;
- color:#c60;
- background: url("button.gif") 0 0 no-repeat;
- text-decoration: none;
- }
- #menu a:hover {
- background-position: -157px 0;
- color: #E9BE75;
- }
- #menu a:active {
- background-position: -314px 0;
- color:white;
- }
- </style>
- <div id="menu">
- <a href="">메뉴 1</a>
- <a href="">메뉴 2</a>
- <a href="">메뉴 3</a>
- <a href="">메뉴 4</a>
- <a href="">메뉴 5</a>
- </div>
[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]
댓글 2개
진정한승리
20년 전
저는 다른 방법을 씁니다.
<style type="text/css">
/***롤오버메뉴용*/
a.rollover img { border:none ; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:none; }
a.rollover:hover img {display:none; }
a.rollover:hover img.over {display:inline; }
</style>
실제 html 코드엔....
<div id="menu">
<a href="..." class="rollover"><img
src="/images/menu01.gif" width="85" height="33" alt="첫번째메뉴" /><img
src="/images/menu_01.gif" class="over" width="85" height="33" alt="" /></a>
</div>
이런 식으로 해봤습니다.
두개의 이미지가 연달아 나올것 같지만, 위의 스타일이 적용될 경우 마우스 hover할 때 롤오버됩니다.
대신, div 안에 꽉 들어가게 div사이즈를 이미지 사이즈에 맞추던지,
테이블 쓸경우 <td></td>사이에 두개의 이미지가 같이들어가게 하되 td 의 width를 이미지 width랑 맞춰줘야 합니다.
스타일 적용후엔 잘 될겁니다.
**** img 태그가 줄바꿈처리된 이유는 이래야 두개의 이미지 사이에 여백이 안들어가게 처리됩니다.(파폭,익스 공통)
이것도 다른 분이 사용하는 방식인데 따라해봤습니다. 태클걸지 마시길..여기에 아직 없는 것 같아서..
<style type="text/css">
/***롤오버메뉴용*/
a.rollover img { border:none ; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:none; }
a.rollover:hover img {display:none; }
a.rollover:hover img.over {display:inline; }
</style>
실제 html 코드엔....
<div id="menu">
<a href="..." class="rollover"><img
src="/images/menu01.gif" width="85" height="33" alt="첫번째메뉴" /><img
src="/images/menu_01.gif" class="over" width="85" height="33" alt="" /></a>
</div>
이런 식으로 해봤습니다.
두개의 이미지가 연달아 나올것 같지만, 위의 스타일이 적용될 경우 마우스 hover할 때 롤오버됩니다.
대신, div 안에 꽉 들어가게 div사이즈를 이미지 사이즈에 맞추던지,
테이블 쓸경우 <td></td>사이에 두개의 이미지가 같이들어가게 하되 td 의 width를 이미지 width랑 맞춰줘야 합니다.
스타일 적용후엔 잘 될겁니다.
**** img 태그가 줄바꿈처리된 이유는 이래야 두개의 이미지 사이에 여백이 안들어가게 처리됩니다.(파폭,익스 공통)
이것도 다른 분이 사용하는 방식인데 따라해봤습니다. 태클걸지 마시길..여기에 아직 없는 것 같아서..
19년 전
IE에서 보면 background 로 넣은 이미지는 깜빡입니다. 왜그런지 쩝;;
불여우에서는 안깜빡입니다..;;
불여우에서는 안깜빡입니다..;;
게시글 목록
| 번호 | 제목 |
|---|---|
| 10331 | |
| 28724 |
HTML
싸이월드 둥근 테두리 만드는 방법
2
|
| 10329 | |
| 10328 | |
| 10326 |
JavaScript
히스토리 브러시 툴(History Brush Tool, 단축키 - Y)
1
|
| 10324 | |
| 10323 | |
| 28723 | |
| 10322 |
JavaScript
슬라이스 툴- Slice Tool (단축키 K)
|
| 10321 | |
| 10320 | |
| 28722 | |
| 10318 | |
| 28719 |
HTML
포토샵 레이어의 이해
2
|
| 10317 |
JavaScript
포토샵 해상도의 종류
|
| 10314 | |
| 10312 | |
| 28716 |
HTML
점선 그리는 법...
2
|
| 10308 |
Flash
포토샵에서 쓰이는 파일정보 입니다.
3
|
| 10307 |
JavaScript
♣ 영문으로 보이는 한글폰트를 한글명으로
|
| 10306 | |
| 10305 | |
| 28715 |
HTML
일러스트 단축키2
|
| 10304 |
JavaScript
일러스트 단축키
|
| 10303 | |
| 28714 | |
| 10302 |
Flash
자동으로 창크기 변환
|
| 28713 |
HTML
XP서비스팩2 무시하고 새창 띄우기
|
| 10301 |
MySQL
mysql table 유뮤 확인 코딩[펌]
|
| 10300 |
PHP
php환경 변수 출력
|
| 10299 | |
| 10296 |
기타
연합뉴스 뉴스티커
2
|
| 10294 | |
| 10293 | |
| 10292 | |
| 10291 |
JavaScript
ls 명령에서 LS_COLOR 환경변수로 확장자별 색 바꾸기
|
| 10289 |
JavaScript
php 날짜, 시간 함수 관련 팁
1
|
| 10285 |
PHP
PHP팁 (보안 등)
3
|
| 28711 |
HTML
개행문자 없애기[펌]
1
|
| 10281 |
Flash
swf 바탕빼서 적용하기
3
|
| 10279 |
Flash
mp3 play 플래시 소스입돠~
1
|
| 28710 | |
| 10278 | |
| 10277 | |
| 10276 | |
| 28709 | |
| 10273 | |
| 10270 |
JavaScript
돌맹이로 글자쓰기 ㅡㅡ;; 강좌...
2
|
| 10269 |
JavaScript
주소 보여주기 시를 때 제가 자주 쓰는 방법 이건 조회수 빵이다 ㅡ0ㅡ;
|
| 10267 | |
| 28708 | |
| 10266 | |
| 10264 | |
| 10263 |
JavaScript
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능
|
| 10261 | |
| 28707 |
HTML
웹 폰트 적용 시키기 - 초보자용 -
|
| 10260 |
JavaScript
접속때마다 음악 다르게 나오기
|
| 10256 |
JavaScript
img 태그에 border=0을 넣지 않고 적용
3
|
| 10255 | |
| 28706 |
HTML
페이지 자동 이동 방법 3가지!!!
|
| 10253 | |
| 28704 |
HTML
body옆의 스크롤바흔적없애기
1
|
| 10250 |
기타
소스훔쳐보기
2
|
| 28703 |
HTML
마우스 오른쪽 버튼 사용금지
|
| 28702 |
HTML
마우스 룰오버시 여러가지 효과내기
|
| 10249 |
Flash
스위시 무비를 플래시에서 들여오기할 때
|
| 10247 |
Flash
SWF 파일 용량 줄이기
1
|
| 10245 | |
| 10243 | |
| 10240 |
Flash
4. 자주 쓰는 플래시 액션스크립트 용어
2
|
| 10239 | |
| 10238 |
Flash
2. 무비 크기를 줄이기 위한 10가지 방법
|
| 10237 |
Flash
1. 메뉴보다 빠른 단축키(Hot Key)들
|
| 10235 |
Flash
여러가지팁
1
|
| 10225 | |
| 28700 |
HTML
포토샾 팁 72가지
1
|
| 10213 | |
| 10210 | |
| 10207 | |
| 10205 | |
| 10204 | |
| 28693 | |
| 10198 |
Flash
실시간채팅창 붙이기 플래시 버튼액션..
5
|
| 10195 |
JavaScript
php폼메일로 일본어 메일 보내기
2
|
| 10191 |
JavaScript
원하는 부분만 프린트하기.
3
|
| 24785 | |
| 28674 |
HTML
디렉토리 이미지 뷰어
18
|
| 24784 | |
| 10189 | |
| 10187 | |
| 10182 | |
| 28669 | |
| 10181 | |
| 10175 | |
| 24779 | |
| 24772 | |
| 10173 | |
| 10168 |
JavaScript
웹호스팅서버 보안 - Open DNS 막기
4
|
| 10163 | |
| 10160 |
JavaScript
자동 스크롤 메뉴 (끄기 기능)
2
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기