サポート » 使い方全般 » WP4.4のレスポンシブイメージ環境下でonmouseoverを使いたい

  • 解決済 narururu

    (@narururu)


    いつもお世話になっています。
    JavaScriptでマウスオーバー時に画像切り替えを行っていましたが、バージョン4.4導入後、FirefoxとChromeで動作しなくなりました(IE11は動作)。
    切り分けたところ、4.4から導入されたというsrcset属性が原因でした。

    srcsetを無効にすれば手っ取り早いのですが、せっかくの機能なので、これを有効にしたまま、画像を切り替えたいのですが、方法はありますでしょうか。

    下記のどちらかを改修して実現できるとありがたいです。
    なにとぞよろしくお願いします。

    ■Jqueryを使用する

    <script type="text/javascript">
    $(function(){
     $('a img').hover(function(){
      $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
       }, function(){
        if (!$(this).hasClass('currentPage')) {
        $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
      }
     });
    });
    </script>

    ■JavaScriptを使用する
    <img src="out.jpg" onmouseover="this.src='on.jpg'" onmouseoout="this.src='out.jpg'">

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • こんにちは

    <img src="off.jpg" alt="yada" width="640" height="475"
      srcset="off.jpg 720w,off-300x223.jpg 320w"
      onmouseover="this.setAttribute('srcset','on.jpg 720w,on-300x223.jpg 320w');"
      onmouseout="this.setAttribute('srcset','off.jpg 720w,off-300x223.jpg 320w');" />

    トピック投稿者 narururu

    (@narururu)

    nobitaさん

    こんにちは。早速教えていただきありがとうございます。
    正常に動作することを確認しました。
    Jqueryの方はいかがでしょうか。
    こちらの方が本文中のimgタグを変えずに済むので、助かったりします。

    jQuery の attr('src') に行っている動作を ‘srcset’ にも行えば良いのでは無いでしょうか?

    トピック投稿者 narururu

    (@narururu)

    ありがとうございます。解決しました。

    トピック投稿者 narururu

    (@narururu)

     

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「WP4.4のレスポンシブイメージ環境下でonmouseoverを使いたい」には新たに返信することはできません。