JavaScript でホバーの画像を変更する

Anika Tabassum Era 2024年2月15日
  1. HTML 属性 onmouseover および onmouseout を使用して関数を起動する
  2. .hover() メソッドを使用して、ホバーの画像を変更する
JavaScript でホバーの画像を変更する

JavaScript では、特定のコードブロックまたはメソッドをフォローアップして、マウスホバーで画像を変更するタスクを実行します。むしろ効率的な方法は、画像ソースを考慮し、マウスホバー効果と連携するユーザー定義関数を作成することです。

この例のセットは、スクリプトセグメント内の特定の関数をトリガーするための HTML 属性 onmouseout および onmouseover を使用した 1つのデモンストレーションを表示します。また、2 番目の例では、jQuery に関連付けられた .hover() 関数があります。

明確な概念については、コードベースを確認しましょう。

HTML 属性 onmouseover および onmouseout を使用して関数を起動する

コアとなる動作原理は、onmouseoveronmouseout に基づいています。そして、これらの属性は、ホバー時に画像を変更するための説明がある関数にマップされます。

.attr() で jQuery に依存しているため、関数を操作するには jQueryCDN が必要になります。

コードスニペット:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
    <a href="#" id="home">
        <img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
    </a>
</div>
function onHover() {
  $('#menuImg')
      .attr(
          'src',
          'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}

function offHover() {
  $('#menuImg')
      .attr(
          'src',
          'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}

出力:

HTML 属性 onmouseover および onmouseout を使用して関数を起動します

.hover() メソッドを使用して、ホバーの画像を変更する

この例は、img クラス home を処理する jQuery の方法を示しています。画像ソース用にクラスを初期化し、必要に応じて関数を生成します。

前のものとの違いは、ここでは HTML 属性を使用しなかったことです。むしろ、明確に機能する .hover() メソッドに依存しました。

コードに飛び乗ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <div>
    <img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
  </div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
        function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
    });
});
</script>
</body>
</html>

出力:

hover()メソッドを使用してホバーの画像を変更します

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

関連記事 - JavaScript Image