［jQuery］画像置換② mouseoverとmouseout / toggle
１．mouseoverとmouseout
特定の要素の上にマウスを載せた時に起きるイベントの指定をmouseoverで、特定の要素の上からマウスを外した時に起きるイベントの指定をmouseoutでできます。
商品画像にマウスを載せた時などに使えます
$ ( function ( ) {
$ (特定の要素) .mouseover ( function ( ) {
特定の要素の上にマウスを載せた時に起きるイベント内容
} ) .mouseout ( function ( ) {
特定の要素の上からマウスを外した時に起きるイベント内容
} );
});
マウスをおいていない時（mouseout）
↓ ↓ ↓ マウスを載せている時（mouseover）
$(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>
上の例ではリンクを貼っていますが、置き換わるのは画像だけなのでリンクには影響ありません。
２．toggle
toggleは同じ命令を繰り返し処理する仕組みで、画像をクリックする度に写真が変わる
ものを作れます。
バージョン1.9から削除されているため、jQuery Migrate 1.2.1を使うことで使用可能になります。
使用方法
①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
・複数の画像を用意しておきます。（ここでは５枚）
<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>
$('img').toggle(function( ){ 〜 } ) ;の中が最初の画像と置き換わる内容。
なので、最初の画像はクリックすると出てこなくなる。
クリックして出てくる画像に最初の画像も入れたい場合は、
},function(){
$('img').attr('src','img/sb1.jpg'); を追加すればよい。
