その他のマウスイベント - web-0127のブログ

応用的なイベント

mouseover()メソッド

マウスをのせたとき
click()メソッドによる画像への移動が実行されないように「return false;」を記述します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mouseover()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p id="photo">
<a id="trigger" href="img/surf.jpg" title="サーフィン"><img src="img/natsu.jpg" width="500" height="338"  alt="夏の風景"></a>
</p>
<p>
画像にマウスをのせるとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
  $( '#trigger' ).mouseover(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.jpg',
    'alt': 'サーフィン'
    });
  }).click(function() {
    return false;
  });
});
</script>
</body>
</html>

mouseout()メソッド

マウスが外れたとき
mouseover()と組み合わせて、マウスが外れたときの処理（元の画像に戻す）を追加しています

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mouseout()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p id="photo">
<a id="trigger" href="img/surf.jpg" title="サーフィン"><img src="img/natsu.jpg" width="500" height="338"  alt="夏の風景"></a>
</p>
<p>
画像の上からマウスを外すとサーフィンの写真が元の画像に置き換わる。
</p>
<script>
$(function(){
  $( '#trigger' ).mouseover(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.jpg',
    'alt': 'サーフィン'
    });
  }).mouseout(function() {
    $( '#photo img' ).attr({
    'src': 'img/natsu.jpg',
    'alt': '夏の風景'
    });
  }).click(function() {
    return false;
  });
});
</script>
</body>
</html>

mouseenter()／mouseleave()メソッド

もうひとつのマウスをのせたとき／外れたとき
mouseover()とmouseout()との違いはありません

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mouseenter()／mouseleave()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p id="photo">
<a id="trigger" href="img/surf.jpg" title="サーフィン"><img src="img/natsu.jpg" width="500" height="338"  alt="夏の風景"></a>
</p>
<p>
画像にマウスをのせるとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
  $( '#trigger' ).mouseenter(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.jpg',
    'alt': 'サーフィン'
    });
  }).mouseleave(function() {
    $( '#photo img' ).attr({
    'src': 'img/natsu.jpg',
    'alt': '夏の風景'
    });
  }).click(function() {
    return false;
  });
});
</script>
</body>
</html>

違い

mouseover()/mouseout()

子孫要素にマウスをのせたとき・外れたときにも発生する

mouseenter()/mouseleave()

指定した要素のみを対象とする

hover()メソッド

mouseenter()／mouseleave()を同時に使うなら

hover( マウスが乗ったときのイベントハンドラ,
　マウスが外れたときのイベントハンドラ )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hover()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p id="photo">
<a id="trigger" href="img/surf.jpg" title="サーフィン"><img src="img/natsu.jpg" width="500" height="338"  alt="夏の風景"></a>
</p>
<p>
画像にマウスをのせるとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
  $( '#trigger' ).hover(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.jpg',
    'alt': 'サーフィン'
    });
  }, function() {
    $( '#photo img' ).attr({
    'src': 'img/natsu.jpg',
    'alt': '夏の風景'
    });
  }).click(function() {
    return false;
  });
});
</script>
</body>
</html>

toggle()メソッド

クリックされるたびに異なる処理を実行する

$(function(){
　$(セレクター).toggle(function(){
　　最初にクリックされたとき実行する処理
　}, function(){
　　2回目にクリックされたとき実行する処理
　}, function(){
　　中略
　}, function(){
　　最後にクリックされたとき実行する処理
　});
});

《sample11.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>toggle()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<button>画像を変更</button>
<p><img src="flower.jpg" alt="花"></p>
<script>
$(function(){
  $('button').toggle(function(){
    $('img').attr('src','sea.jpg').attr('alt','海');
  },function(){
    $('img').attr('src','Jellyfish.jpg').attr('alt','くらげ');
  },function(){
    $('img').attr('src','Building.jpg').attr('alt','建物');
  },function(){
    $('img').attr('src','flower.jpg').attr('alt','花');
  });
});
</script>
</body>
</html>

toggle()メソッド内に関数を利用する場合、1.8.2以下ある必要があります（1.9.1では動かない）

画像をクリックして切り替える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>toggle()メソッド</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){
  $('#imgChange').toggle(function(){
      $('img').attr('src','sea.jpg').attr('alt','海');
    },function(){
      $('img').attr('src','Jellyfish.jpg').attr('alt','くらげ');
    },function(){
      $('img').attr('src','Building.jpg').attr('alt','建物');
    },function(){
      $('img').attr('src','flower.jpg').attr('alt','花');
  });
});
</script>
<style>
p {
  cursor: pointer;
}
</style>
</head>
<body>
<p>画像を変更</p>
<p id="imgChange"><img src="flower.jpg" alt="花"></p>
</body>
</html>