在 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