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

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. JavaScript でホバーの画像を変更する
Anika Tabassum Era 2024年2月15日
JavaScript JavaScript Image
  1. HTML 属性 onmouseover および onmouseout を使用して関数を起動する
  2. .hover() メソッドを使用して、ホバーの画像を変更する
JavaScript でホバーの画像を変更する

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

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

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

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

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

.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
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