くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]画像置換② mouseoverとmouseout / toggle

1.mouseoverとmouseout

特定の要素の上にマウスを載せた時に起きるイベントの指定をmouseoverで、特定の要素の上からマウスを外した時に起きるイベントの指定をmouseoutでできます。

商品画像にマウスを載せた時などに使えます


  $ ( function ( ) {

    $ (特定の要素) .mouseover ( function ( ) {      
            特定の要素の上にマウスを載せた時に起きるイベント内容
         } ) .mouseout ( function ( ) {
     特定の要素の上からマウスを外した時に起きるイベント内容
    } );
  });

 

マウスをおいていない時(mouseout)

f:id:pleasure10501:20150419160026p:plain

      ↓ ↓ ↓ マウスを載せている時(mouseover)

f:id:pleasure10501:20150419160027p:plain

$(function(){
   $('img').mouseover(function(){
       $(this).attr('src','/img/l03.png').attr('alt','秋桜');
   }).mouseout(function(){
       $(this).attr('src','/img/l01.png').attr('alt','桜');
   });
});
<body>
<p><a href="#"><img src="/img/l01.png" alt="桜"></a></p>
</body>

上の例ではリンクを貼っていますが、置き換わるのは画像だけなのでリンクには影響ありません。

2.toggle

toggleは同じ命令を繰り返し処理する仕組みで、画像をクリックする度に写真が変わる
ものを作れます。

バージョン1.9から削除されているため、jQuery Migrate 1.2.1を使うことで使用可能になります。

jQuery Migrate

使用方法

 ①jQuery Migrate 1.2.1を保存し、スクリプトに読み込む
 <script src="jquery-migrate-1.2.1.min.js"></script>

 ②外部から読み込む
  http://code.jquery.com/jquery-migrate-1.2.1.min.js

 

複数の画像を用意しておきます。(ここでは5枚)

<body>
<p><img src ="img/sb1.jpg"></p>
</body>

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
   $('img').toggle(function(){
      $('img').attr('src','img/sb2.jpg');
   },function(){
      $('img').attr('src','img/sb3.jpg');
   },function(){
      $('img').attr('src','img/sb4.jpg');
   },function(){
      $('img').attr('src','img/sb5.jpg');
   });
});
</script>

f:id:pleasure10501:20150420150519p:plainf:id:pleasure10501:20150419164402p:plainf:id:pleasure10501:20150419164403p:plainf:id:pleasure10501:20150419164404p:plainf:id:pleasure10501:20150419164410p:plain

 $('img').toggle(function( ){ 〜 } ) ;の中が最初の画像と置き換わる内容。
なので、最初の画像はクリックすると出てこなくなる。

クリックして出てくる画像に最初の画像も入れたい場合は、
},function(){
      $('img').attr('src','img/sb1.jpg'); を追加すればよい。

広告を非表示にする