在 JavaScript 中更改懸停影象

Anika Tabassum Era 2024年2月15日 JavaScript JavaScript Image
  1. 使用 HTML 屬性 onmouseover 和 onmouseout 來觸發函式
  2. 使用 .hover() 方法在懸停時更改影象
在 JavaScript 中更改懸停影象

在 JavaScript 中，我們跟蹤一些特定的程式碼塊或方法來執行在滑鼠懸停時更改影象的任務。相反，有效的方法是建立一個使用者定義的函式，該函式將考慮影象源並與滑鼠懸停效果配合。

我們的示例集將檢視一個帶有 HTML 屬性 onmouseout 和 onmouseover 的演示，以觸發指令碼段中的某些功能。此外，在第二個例項中，我們將有一個與 jQuery 關聯的 .hover() 函式。

讓我們檢查一下程式碼庫以瞭解清楚的概念。

使用 HTML 屬性 onmouseover 和 onmouseout 來觸發函式

核心工作原理是基於 onmouseover 和 onmouseout。並且這些屬性對映到具有其描述以在懸停時更改影象的功能。

我們將需要一個 jQuery CDN 來操作該函式，因為它恰好依賴於帶有 .attr() 的 jQuery。

程式碼片段：

<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() 方法在懸停時更改影象

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： 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