이미지 롤오버를 수행하는 가장 좋은 방법은 무엇입니까?

Question

마우스를 올리면 내 메인 로고가 바뀌길 원합니다.

나는 이것을 달성하는 몇 가지 방법이 있으며, 안정성, 브라우저 호환성, 효율성 및 설치의 용이성을 위해 최선의 방법이 무엇인지 알고있었습니다. 내가 찾은

몇 가지 방법은 다음과 같습니다 "SRC"속성의

• 자바 스크립트 (jQuery를) 교체. 배경과 "가져가"

더 이상 사용

CSS? 무엇이 가장 좋습니까?

Answer 1

결론

, 당신은 HTML 마크 업의 src을 갖고 싶어. Javascript 솔루션을 사용하고 롤오버 이미지를 속성에 넣으려고합니다.

콘텐츠가없는 이미지 UI 요소, 특히 사이트에서 공통적이거나 복제 된 UI 요소의 경우 스트레이트 CSS 솔루션이 가장 좋습니다 (각 호출시 이미지 위치를 다시 선언 할 필요가 없습니다). CSS 솔루션 중에서 스프 라이트는 프리 로딩 오버 헤드를 필요로하지 않기 때문에 가장 좋습니다.

자바 스크립트 솔루션

HTML : jQuery를에

<img src="/img/one.jpg" data-rollover="/img/two.jpg" /> 

:

$(function(){ 
    $('img.rollover').hover(function(){ 
    var e = $(this); 
    e.data('originalSrc', e.attr('src')); 
    e.attr('src', e.attr('data-rollover')); 
    }, function(){ 
    var e = $(this); 
    e.attr('src', e.data('originalSrc')); 
    }); /* a preloader could easily go here too */ 
}); 

샘플 구현 : http://jsfiddle.net/dtPRM/1/

장점 : 그것은 쉽게; 말된다; 라이브러리를 설정하면 최소한의 추가 마크 업과 함께 작동합니다.

하향 : jQuery 라이브러리를로드 할 때 JavaScript 및 오버 헤드가 필요합니다.

아마도 가장 좋은 옵션입니다. 사용자가 롤오버가 관련된 브라우저를 사용하는 경우 (이 경우)이 옵션을 실행하기위한 Javascript 기능이 있습니다. 어떤 이유로 든 Javascript를 의도적으로 사용 중지 한 사람들은 <noscript>이라는 메모를 남겨두면 전체 기능 세트를 얻을 수 없다는 것을 알 수 있습니다.

CSS의 솔루션 : 최고의

HTML :

<div id="img1" /> 

CSS :

샘플 구현

div#img1 { 
    height: 400px; 
    width: 300px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-position: top right;} 

: 개인적으로 http://jsfiddle.net/dtPRM/5/

, 내가 생각하는 내용 FUL 이미지, 이것은 CSS + 두 배경 이미지보다 더 나쁜 옵션입니다. soluti 에. 디스플레이의 의미 론적 가치와 HTML 마크 업을 분리합니다.

UI 요소와 같은 콘텐츠가없는 이미지를 사용하는 경우 이것이 내 의견으로는 최상의 해결책입니다.

CSS의 솔루션 : 또한 좋아

또 다른 CSS 옵션 (당신이 의미 론적으로 의미있는 이미지처럼 HTML에 이미지 태그를하려는 경우 CSS 솔루션들 사이에서 선호) 배경 이미지를 포함하지 않는 것을 볼 수 있습니다 .

<div class="rollover"> 
    <img class="rollover" src="http://dummyimage.com/600x400/000/fff" /> 
    <img class="" src="http://dummyimage.com/600x400/fff/000" /> 
</div> 

CSS는 (내가 여기 :not 의사 선택기를 사용하지만, 그것을 사용하지 않는 것이 매우 쉽게, 나는 또한 내가 의미 뒤로 클래스 이름을 가지고 생각) :

div.rollover img:not(.rollover) {display: none;} 
div.rollover:hover img:not(.rollover) {display: inline;} 
div.rollover:hover img.rollover {display: none;} 

샘플 구현 : http://jsfiddle.net/dtPRM/2/

이점 : 모든 정보를 스타일 시트에 넣는 이전 CSS 솔루션에 비해 의미 상으로 유용합니다.

하향 : 외부 마크 업이 필요합니다.

댓글 : 브라우저가 요청하는지 여부에 따라 자동으로 미리로드 될 수 있습니다.

결론 : IE2 호환성 또는 비 JS 지원이 절대적으로 필요하기 때문에 옵션 (1)을 사용할 수없는 경우 괜찮은 대체 옵션입니다.

하는 CSS unsolution :

난 당신이 질문에 언급 때문이 언급 멀리있어. 나는 그것을 사용하지 않을 것이다.

HTML :

<div id="img1" /> 

CSS :

div#img1 { 
    height: 400px; 
    width: 600px; 
    background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;} 
div#img1:hover { 
    background-image: url('http://dummyimage.com/600x400/fff/000');} 

샘플 구현 : http://jsfiddle.net/dtPRM/4/

장점 : 널리 호환; 당신이 정말로 필요로하는 것은 배경 이미지와 호버입니다.

하향 : 이미지를 CSS에 넣고 중앙에 배치하는 것은 의미 상으로 이상합니다. 미래의 수정을 더욱 어렵게 만듭니다. 즉, 롤오버 이미지를 보장하는 시나리오가있는 경우 콘텐츠가 아닌 이미지 (예 : UI 요소) 일 가능성이 높습니다.이 경우 CSS는 의미 상으로 (아마도) 일반 이미지. 아래 스프라이트에 대한 참고 사항을 참조하십시오.

기타 부작용 : 이미지 높이와 너비를 신중하게 지정해야합니다 (좋은 방법이지만 어쨌든 좋은 결과를 얻으려면 번거로울 수 있습니다). CSS 배경 이미지를 비정상적으로 다룰 수있는 모바일 브라우저에서 보는 사용자.

더욱 단점 : 당신이 그것의 상단에 프리 로더 레이어하려는 경우, 당신은 자바 스크립트를 자바 스크립트를 사용하려고하고 어떻게 든 롤오버 할 요소를 선택하고 그 속도로, 당신은뿐만 아니라 사용할 수있는 모두를위한.

하단 : 콘텐츠 용 이미지에는 사용하지 마십시오. Javascript에서 멀리 떨어져 있어야하는 경우 UI 요소에 스프라이트를 사용하고 의미 론적으로 의미있는 이미지를 대체 솔루션으로 사용하십시오.

Answer 2

:hover CSS 규칙을 사용해야합니다.

Answer 3

CSS까지. 비록 당신이 javascript로 이미지를 precache하고 싶을 수도 있습니다. '스프라이트'List a part - sprites CSS

Answer 4

이미지 롤오버는 하나에 두 이미지를 결합하여 다음 이미지를 이동하는 CSS를 :hover를 사용합니다.

CSS를 사용하는 한 가지 이점은 JavaScript가 꺼져 있어도 작동한다는 것입니다.

하나의 이미지를 사용하는 한 가지 이점은 추가 HTTP 요청을 피할 수 있다는 것입니다.

참조 :

• http://csssprites.com/
• http://css-sprit.es/

Answer 5

CSS 사용하여 배경과 즉 "가져가"

사용 CSS 스프라이트를 사용하여

Answer 6

$('#div1').hover(function(){ 
    this.style.color='white'; 
},function(){ 
this.style.color='black; 
}); 

또는

: http://css-tricks.com/css-sprites/

도구는 이미지와 CSS를 생성 할 수 있도록 이 같은 이미지를 사용

$('#div1').onmouseover()... 
$('#div1').onmouseout()... 

Answer 7

#btn{ 
width:100px; height:100px;/*the dimensions of your image*/ 
background:url(bird.png) left top no-repeat; 
} 
#btn:hover{ 
background-position:left bottom;/* pixel references can be used if prefered */ 
} 

:

참고 : 이미지가 이전에 캐시되지 않은 경우 짧은 이미지 로딩 시간이 발생하므로은 JS 이미지 교체하지 마십시오.

호프가 도움이 되었기를 바랍니다.

W.

Answer 8

사용 CSS 스프라이트와 :이 CSS에서 사이비 클래스를 가져.JS를 통해 또는 CSS를 통해 하나

1. 전환 이미지 소스가 새로운 이미지가 브라우저에 의해 다운로드되는 동안 최초의 마우스 오버에 "깜박"는 발생합니다 : 그 이유는. 스프라이트를 사용하면 위치를 변경하는 이미지가 하나뿐이므로 깜박 거리지 않습니다.

2. 단일 이미지로 인해 HTTP 요청이 줄어들어 사이트로드가 일반적으로 빠릅니다.

3. JavaScript가 비활성화 된 경우 작동합니다.

4. 모든 브라우저 유형 (데스크톱, 어쨌든, 호버 상태가없는 휴대 전화 브라우저는 지원하지 않습니다)에서 지원됩니다.

더 많은 정보 : 컨텐츠 FUL 이미지의 경우 http://css-tricks.com/css-sprites/