1

レスポンシブ Web サイトの画像要素に画像のロールオーバー効果を適用する方法を見つけようとしています。

問題は、picture タグの scrset 属性に画像のロールオーバーを適用できるかどうかです。

JavaScript ロールオーバー効果のある 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=""/>

JavaScript ロールオーバー効果のある画像要素の動作しない例

<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を使用して画像タグにロールオーバー効果を達成するための提案はありますか?

Web ページには、ロールオーバー効果が必要な約 12 のレスポンシブ イメージがあります。

4

2 に答える 2

1

src/srcset の変更は、たとえ 1 つの img であっても最適ではありません。ダウンロードが完了する前に画像にカーソルを合わせたり、放置したりすると、画像のダウンロードが中止される可能性があるためです。

私はこれらのいずれかを行うと思います：

  • で画像をcloneNode(true)複製し、複製の URL を書き換えます。元の画像要素がイベントを受け取ったら、mouseoverそれをクローンに置き換えます。クローンがイベントを受け取るmouseoutと、元のイベントに置き換えます。
  • マークアップで画像を複製し、2 番目の画像はホバーした画像を表します。2 番目の図にはhidden属性セットがあります。hidden必要に応じて、両方の要素の属性を切り替えます。

将来的には、のようなものを使用して CSS で画像を切り替えることが可能になるはずimg:hover { content:image-set(...); }です。

于 2015-02-27T11:02:44.393 に答える
0

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');
  })
});
于 2014-09-14T16:16:43.027 に答える