[JavaScript] マウスオーバーで画像を切り替える

投稿日：2016年11月13日更新日：2018年5月2日

画像にマウスポインタが当たると画像が変わるサンプルです。

サンプルソース

例）画像（id="img1"）にマウスポインタを当てると画像を"cat2.png"に変更する

//マウスオーバー時の処理
function mouseOn(){
  var obj = document.getElementById("img1");
  obj.src = "cat2.png";
}

//マウスアウト時の処理
function mouseOff(){
  var obj = document.getElementById("img1");
  obj.src = "cat1.png";
}

//マウスオーバー時の処理

function mouseOn(){

var obj = document.getElementById("img1");

obj.src = "cat2.png";

}

//マウスアウト時の処理

function mouseOff(){

var obj = document.getElementById("img1");

obj.src = "cat1.png";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <img id="img1" src="cat1.png" onmouseover="mouseOn();" onmouseout="mouseOff();" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

画像にマウスポインタを当てると、画像が変わります。

解説

画像を変えるには、img要素のsrcパラメータの値を変更すればOKです。

執筆者：とら