이미지를 미리 불러올(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개
저는 다른 방법을 씁니다.
<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 태그가 줄바꿈처리된 이유는 이래야 두개의 이미지 사이에 여백이 안들어가게 처리됩니다.(파폭,익스 공통)
이것도 다른 분이 사용하는 방식인데 따라해봤습니다. 태클걸지 마시길..여기에 아직 없는 것 같아서..
게시글 목록
| 번호 | 제목 |
|---|---|
| 8511 |
JavaScript
아파치 로그 정리(압축) logrotate
|
| 8510 |
MySQL
아파치와 mysql 자동실행 시키는 방법..
|
| 8509 | |
| 8506 |
PHP
아파치 무단링크 막기
2
|
| 8505 | |
| 8503 | |
| 8502 | |
| 8497 | |
| 8492 | |
| 8491 | |
| 8490 | |
| 8489 |
JavaScript
불여우에서도 되는 메뉴 2
|
| 8487 | |
| 8484 | |
| 8483 | |
| 8482 | |
| 28459 | |
| 8481 | |
| 8478 | |
| 8477 | |
| 8475 | |
| 8474 | |
| 8473 | |
| 8472 |
JavaScript
RH7.3 설치후 해주어야 할것들
|
| 8471 | |
| 8469 | |
| 8468 | |
| 8467 | |
| 8466 | |
| 8465 |
JavaScript
원하는 사람에게 메일 보내기 버튼 만들기
|
| 8464 | |
| 8463 | |
| 8462 | |
| 8461 | |
| 8460 |
JavaScript
전송버튼에 '전송중...' 이라는 표시를 해 줍니다
|
| 8459 | |
| 8458 | |
| 8457 | |
| 8456 |
JavaScript
텍스트 필드에 디폴트 메세지를 보여주고 클릭하면 사라집니다
|
| 8455 |
JavaScript
특정일(ex 30일)이 지난 파일 삭제 및 디렉토리 이동하기
|
| 8452 |
MySQL
cron [퍼옮]
2
|
| 8451 |
MySQL
mysql에서의 subquery
|
| 8449 |
MySQL
여러데이터베이스 사용하는 방법 - 퍼옮
1
|
| 28458 |
HTML
문자열 연결 CONCAT()
|
| 8445 | |
| 8444 |
MySQL
패스워드 변경 및 루트 패스워드 찾기
|
| 8443 |
MySQL
MySQL 설치
|
| 8442 | |
| 8441 |
MySQL
MySQL 컬럼 형 [퍼옮]
|
| 8440 | |
| 8439 |
MySQL
MySQL 내부연산 ( 비교연산 )
|
| 8438 | |
| 8437 |
MySQL
MySQL 함수정리 ( 수학함수 ) [퍼옮]
|
| 8436 |
JavaScript
GROUP BY 와 같이 사용되는 함수 [퍼옮]
|
| 8435 |
MySQL
MySQL 문자열 관련함수[퍼옮]
|
| 8433 |
MySQL
MySQL 날짜 관련 함수[퍼옮]
1
|
| 8428 | |
| 8427 | |
| 8426 |
MySQL
MySql 기본명령어 모음[콘솔사용시]
|
| 28456 | |
| 8425 |
JavaScript
유효 도메인 책크하기
|
| 8424 | |
| 8423 | |
| 8422 | |
| 8421 |
기타
파일 관련함수 [퍼옮]
|
| 8419 | |
| 8418 | |
| 8417 |
PHP
미리 정의된 변수들 [퍼옮]
|
| 28455 |
HTML
디렉토리 관련함수 [퍼옮]
|
| 8416 |
MySQL
문자열 함수 - 퍼 옮 -
|
| 8415 |
JavaScript
배열함수
|
| 8414 | |
| 8412 |
JavaScript
mktime()
1
|
| 28454 |
HTML
setcookie
|
| 8411 |
PHP
array_rand()
|
| 28451 |
HTML
eregi() vs ereg()
2
|
| 8410 |
JavaScript
strrchr()
|
| 8409 |
기타
key()
|
| 8406 |
JavaScript
GetImageSize()
2
|
| 8405 |
JavaScript
리눅스 서버의 시간이 맞지 않을때?
|
| 28450 |
HTML
man 페이지 txt파일로 저장하기
|
| 8404 | |
| 8403 |
기타
이동식 메뉴 박스
|
| 8402 | |
| 8401 | |
| 8400 |
JavaScript
체크박스를 클릭하면 이동하는 체크박스 메뉴 스크립트
|
| 8399 | |
| 8391 | |
| 8390 | |
| 8389 |
JavaScript
디렉토리 내에서 파일만 퍼미션 변경
|
| 8387 | |
| 28447 |
HTML
이미지를 5단계로 키워서 보자
2
|
| 8386 |
JavaScript
DirectX의 와이프 기능을 사용한 이미지 스와핑 효과
|
| 8384 | |
| 8382 |
JavaScript
특정 이미지를 지정한 날까지만 보여줍니다
1
|
| 8380 | |
| 8379 | |
| 8377 |
JavaScript
iframe 써서 노 프레임 효과 내기
1
|
| 8376 | |
| 8375 |
MySQL
[펌] mysql 인덱싱.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기