ホーム » JQueryの難しさ

JQueryの難しさ

 | ,  | 

以前制作させていたサイトではマウスオーバーでサムネイル画像を切り替える動きを組み込みました。いかんせん、自分は完全に独学なのであれこれ調べながらの実装でした。

 

ブログ JQueryの難しさ

 

ソースは以下。(CSSは割愛)

 

<script type="text/javascript">

jQuery(document).ready(function($) {? ? 

  var _src = '',? ? ? ?

    _target = '';
    $('.imgonmouse li > img').hover( 

      function(){ 

        //mousehover

          _target = $(this).data( 'targetid' ); //変更先DOMのid取得

          _src = $(this).attr('src'); //自身の画像取得 

          $('#' + _target).attr('src', _src);

          },
          function(){ 

            //mouseout

          }

        )

  });

</script>

 

HTMLソース例

 

<div class="imgonmouse">

<div><img id="imgonmouse_main" src="gazou_1.jpg" width="300" height="300" /></div>

  <ul>

    <li><img src="gazou_2.jpg" data-targetid="imgonmouse_main" /></li> 

    <li><img src="gazou_3.jpg" data-targetid="imgonmouse_main" /></li>

  </ul>

</div>

ブログ JQueryの難しさ


私の基本的な制作環境はWindows10で、ブラウザはGoogleChromeです。もちろん、FireFoxやOpera、Edgeは確認するためにインストールはしています。
今回のお客さまは基本BtoBのビジネスなのでパソコン環境がメインになります。

 

上記のコードを組み込んで作業を進め、自身の基本環境のChromeで確認して問題なく、お客様環境でも確認してもらい最終Fixしてもらいました。しかし、しばらくして自身の環境で確認するとマウスオーバーが効いていないことを発見。あれこれ調査するも原因不明で時間だけが経過する状況でした。

そこで、chromeの拡張プラグインでIE環境をシミュレートする「IE Tabものがあり、それで確認すると動作しました。また、ブラウザをFireFoxにしても動作しています。※Opera、Edgeは動作せず。

お客さまのChromeでも動作はしているようで、私固有環境の問題??しかし、とても不思議な現象です。特にJavaScriptに影響を及ぼす拡張プラグインは入れていないので。。。また、IEのシミュレートやIE本体でも動作するのにEdgeで動作しないのも腑に落ちないところですね。

 

ブログ JQueryの難しさ

 

まだまだ勉強不足だと痛感しています。
これに加えて、タブレット端末でのタッチ操作にも対応させるなど、WEB制作に求められることはどんどん高度になってきています。しっかりとついていかないと!!
とりあえず、自分のChrome環境を解決しておかないと。。。