在使用jquery或javascript加载imag时更改href attrb

我想使用jquery或javascript转到此图像，然后将图像悬停，将href attrb更改为另一个src图像

代码如下：

<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>

---

在图像标签中添加一个id，例如id=“image”，然后添加此javascript

<script type="text/javascript">
$(function(){
    $('#image').hover(function(){
        $(this).attr('src', 'images/new_image.png');
    });
});

$（函数（）{
$（'#image'）。悬停（函数（）{
$（this.attr（'src'，'images/new_image.png'）；
});
});

首先，让我们为自己提供一种方法，将此锚定/图像组合与页面中的任何其他组合区分开来：

<a class="button" href="Sign-Up.aspx" ><img alt="Login"
  src="images/login3.png"
  style="width: 173px; margin-top: 0px; z-index:10;" /></a>

第二位确保我们在不悬停时回到原始状态

然而，您实际上并不需要Javascript来实现这一点；您可以只使用CSS和HTML来实现。要实现这一点，您必须将链接的文本和图像分开。类似于以下HTML的内容：

<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

（我省略了

margintop

和

z-index

规则，因为它们可能依赖于页面中的其他内容。）

我们在那里做的是将图像作为CSS背景图像附加到锚点，然后在悬停在锚点上时更改它。然后对文本（以前在图像的

alt

属性中）进行样式设置，使其不显示（但仍可用于搜索引擎和辅助工具）

---

但是，这两种解决方案仍然存在问题，因为在您悬停之前不会加载

images/login3\u hover.png

图像，因此在加载锚定时，您会看到锚定后背景颜色的短暂闪光。要解决这个问题，您需要使用，它建立在上面的

背景图像
技术的基础上。
您尝试了什么？使用和方法非常容易。
src
而不是
href
this.src='images/new_image.png'
而不是
$（这个）.attr（…）
更好。@RobW-thanx，我把它改成了src。使用jQuery时，我认为最好使用$（this）.attr（）。另一个选项是通过var rollover=newimage预加载图像；rollover.src='images/rollover.png'；然后您可以只使用$（this.attr（'src'，rollover.src））；jQuery是JavaScript。JavaScript中可读且支持良好的任何内容都不必用jQuery编写。有关许多示例的列表，请参见。@RobW我同意，我只是太习惯于使用jQuery处理所有事情，我从来没有想过在最明显的事情上使用纯javascript
<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

a.button {
    width: 173px;
    height: 73px; // or whatever your image height is
    position: relative;
    background-image: url("images/login3.png");
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
}

a.button:hover {
    background-image: url("images/login3_hover.png");
}
a.button b {
    position: absolute;
    left: -9999px;
}