jQueryでプラグインを使用せずに画像でマウスオーバーした時に、表示画像を切替える方法をご紹介します。

1. 1. プラグイン「elevatezoom.js」のダウンロード
   2. 必要となるファイル
      • jQuery本体「jquery-1.10.2.js」
   3. サンプルソース「HTML」
      
      XHTML

      <script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script>

      1	<script type="text/javascript" charset="utf-8" src="./js/jquery-1.10.2.js"></script>

      
      デフォルトで表示する画像を指定します。画像ファイル名の最後に「_off」とするのがポイントです。また、マウスオーバー時に表示する画像を同じパス内でファイル名の最後を「_on」として配置します。
      
      XHTML

      <a href="#"> <img id="hoverSample1" src="./img/sample_img_off.jpg" alt="マウスオーバー時に画像切替" border="0" width="400" height="224"/> </a>

      1 2 3

      <a href="#"> <img id="hoverSample1" src="./img/sample_img_off.jpg" alt="マウスオーバー時に画像切替" border="0" width="400" height="224"/> </a>

   4. サンプルソース「jQuery」
      
      JavaScript

      jQuery(function($) { // マウスオーバー時に画像を切替表示 $('a #hoverSample1').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')); } }); });

      1 2 3 4 5 6 7 8 9 10

      jQuery(function($) { // マウスオーバー時に画像を切替表示 $('a #hoverSample1').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')); } }); });

   5. 実行サンプル

以下の画像でマウスオーバーすると表示する画像が切り替わります。