picture element srcset responsive image 롤오버

Question

반응 형 웹 사이트에서 그림 롤오버 효과를 그림 요소에 적용하는 방법을 알아 내려고하고 있습니다.

질문은 그림 롤오버에 그림 태그의 scrset 속성을 적용 할 수 있습니까? 자바 스크립트 롤오버 효과와 태그 IMG 예를 들어 작업

<img src="media/images/feature-films/tmbs/zen-zero.jpg" 
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-ro.jpg'" 
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'" 
alt=""/> 

<picture> 
<source srcset="media/images/feature-films/tmbs/zen-zero-large.jpg" 
onmouseover="this.src='media/images/feature-films/tmbs/zen-zero-large-ro.jpg'" 
onmouseout="this.src='media/images/feature-films/tmbs/zen-zero.jpg'" 
media="(min-width: 880px)"> 

<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)"> 
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg"> 

<!-- fall back --> 
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt=""> 
</picture> 

사람이 어떤 제안이 사진에 롤오버 효과를 달성하기 위해 괭이 있습니까 자바 스크립트 롤오버 효과로 사진 요소의 예를 작동하지 않음 태그를 사용하여 srcset?

웹 페이지에는 롤오버 효과가 필요한 약 12 ​​개의 반응 이미지가 있습니다.

Answer 1

HTML :

<picture id="zen"> 
<source class="large" srcset="media/images/feature-films/tmbs/zen-zero-large.jpg" media="(min-width: 880px)"> 

<source srcset="media/images/feature-films/tmbs/zen-zero-small.jpg" media="(max-width: 478px)"> 
<source srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg"> 

<!-- fall back --> 
<img srcset="media/images/feature-films/tmbs/zen-zero-medium.jpg" alt=""> 
</picture> 

jQuery를 : 당신이 그것을 가져 또는 경우 이미지의 다운로드를 중지 할 수 있기 때문에

$(document).ready(function() { 
    $('#zen').on('mouseover', function() { 
    $(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large-ro.jpg'); 
    console.log('mouse over'); 
    }) 
    $('#zen').on('mouseout', function() { 
    $(this).find('.large').attr('srcset', 'media/images/feature-films/tmbs/zen-zero-large.jpg'); 
    console.log('mouse out'); 
    }) 
}); 

Answer 2

SRC/srcset을 변경하면, 단 한 번의 IMG를 들어, 최적이 아닌 다운로드가 완료되기 전에 그대로 두십시오. cloneNode(true)와

• 복제 그림을 그리고 클론의 URL을 다시 작성 :

  나는 내가이 중 하나를 할 것이라고 생각합니다. 원본 그림 요소가 mouseover 이벤트를 받으면 클론으로 바꿉니다. 클론이 mouseout 이벤트를 받으면 원본으로 바꿉니다.

• 마크 업에서 이미지를 복제하고 두 번째 이미지는 이미지를 복제합니다. 두 번째 그림에는 hidden 특성 집합이 있습니다. 두 요소의 hidden 특성을 적절하게 전환하십시오.

미래에 img:hover { content:image-set(...); }과 같은 것을 사용하여 이미지를 CSS로 토글 할 수 있어야합니다.