테스트 사이트 - 개발 중인 베타 버전입니다

이미지를 미리 불러올(Preload) 필요가 없는 CSS Image Rollover

· 20년 전 · 5822 · 2

이미지를 미리 불러올(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)를 이용하여, 메뉴의 상태에 따라 이미지의 해당 부분을 보여주는 것입니다. 일종의 트릭이라 할 수 있겠네요.

적용예

소 스
  1. <style type="text/css">
  2. #menu a {
  3. display:block;
  4. width:120px;
  5. margin: 1em 0; padding:7px 0 10px 20px;
  6. font: bold 14px/1 sans-serif;
  7. color:#c60;
  8. background: url("button.gif") 0 0 no-repeat;
  9. text-decoration: none;
  10. }
  11. #menu a:hover {
  12. background-position: -157px 0;
  13. color: #E9BE75;
  14. }
  15. #menu a:active {
  16. background-position: -314px 0;
  17. color:white;
  18. }
  19. </style>
  20. <div id="menu">
  21. <a href="">메뉴 1</a>
  22. <a href="">메뉴 2</a>
  23. <a href="">메뉴 3</a>
  24. <a href="">메뉴 4</a>
  25. <a href="">메뉴 5</a>
  26. </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 태그가 줄바꿈처리된 이유는 이래야 두개의 이미지 사이에 여백이 안들어가게 처리됩니다.(파폭,익스 공통)
이것도 다른 분이 사용하는 방식인데 따라해봤습니다. 태클걸지 마시길..여기에 아직 없는 것 같아서..
IE에서 보면 background 로 넣은 이미지는 깜빡입니다. 왜그런지 쩝;;
불여우에서는 안깜빡입니다..;;

게시글 목록

번호 제목
8511
8510
8509
8506
8505
8503
8502
8497
8492
8491
8490
8489
8487
8484
8483
8482
28459
8481
8478
8477
8475
8474
8473
8472
8471
8469
8468
8467
8466
8465
8464
8463
8462
8461
8460
8459
8458
8457
8456
8455
8452
8451
8449
28458
8445
8444
8443
8442
8441
8440
8439
8438
8437
8436
8435
8433
8428
8427
8426
28456
8425
8424
8423
8422
8421
8419
8418
8417
28455
8416
8415
JavaScript 배열함수
8414
8412
JavaScript mktime() 1
28454
8411
28451
8410
JavaScript strrchr()
8409
기타 key()
8406
8405
28450
8404
8403
8402
8401
8400
8399
8391
8390
8389
8387
28447
8386
8384
8382
8380
8379
8377
8376
8375