0

I've four links on my HTML page. The code is as follows :

<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover();"/></a>
<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover();" /></a>
<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover();" /></a>
<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover();" /></a>

On hover, I'd like to change the corresponding image to a different one. I do not wish to write a different function for every image tag. In the Javascript function, how do I find out which img tag called the onHover function?

4

6 回答 6

2

传递元素：

..... onmouseover="onHover(this)";

然后做

function onHover(elem) {
    elem.src = 'someother_image.png';
}

或使用 jQuery 事件处理程序：

$('#imgH, #imgA, #imgC, #imgL').on('mouseover', function() {
    this.src = 'someother_image.png';
});
于 2013-09-28T17:57:54.153 回答
1

停在那里。

你正在以一种不太理想的方式解决这个问题。

  1. onmouseover作为内联属性是添加事件侦听器的糟糕方式（查看所有重复项）
  2. 你编码它的方式，它真的不可能告诉（不是不添加this每个参数）
  3. 您甚至不需要 JavaScript（假设您希望图像在指针离开时恢复）！

相反，使用 CSS（属性）使a元素使用图像作为背景。background-image

然后，在 上:hover，更改它，或者更好的是，使用精灵表并简单地修改background-position.

它看起来像这样（将id属性移动到a元素）......

a.lb {
    background-image: url(/images/menu.png);
}

#imgH {
    background-position: 0 0;
}

#imgH:hover {
    background-position: 0 -200px;
}
于 2013-09-28T17:58:22.180 回答
1

我建议您删除内联脚本调用并使用它：

$('a.lb img').on('mouseover', function() {
    this.src = new_image_you _want; //this is the var with the image you want
});

此处的代码演示以获取您悬停的图像。

于 2013-09-28T18:10:24.137 回答
0 
<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover(this.id);"/></a>

<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover(this.id);" /></a>
于 2013-09-28T22:54:36.240 回答
0

这是一种 jQuery 方法，因为您已将问题标记为此类。

请看一下事件绑定器.hover()，它是链式.mouseenter()和的简写.mouseleave()。

您可以像这样定义您的图像链接，data-alternative-src作为您的mouseover图像路径。

<a class="lb" href="#">
  <img src="original.png" data-alternative-src="alternative.png" />
</a>

然后，我们可以将您的原始图像路径缓存到另一个属性data-original-src，而不会膨胀您的 HTML 代码（以及禁用 Javascript 的 Web 客户端）：

$(document).ready(function() {
  $('a.lb img').each(function() {
    $(this).attr('data-original-src', $(this).attr('src'));
  });
});

在鼠标移入和移出时，我们切换到正确的图像：

$('a.lb').hover(function() {
  var image = $(this).find('img');
  img.attr('src', img.attr('data-alternative-src'));
}, function() {
  var image = $(this).find('img');
  img.attr('src', img.attr('data-original-src'));
});
于 2013-09-28T18:06:03.000 回答
0

示例工作演示

改变悬停图像的工作DEMO2

如果你正在寻找纯 javascript 试试这个

代码

function onHover(img)
{
alert(img.id); //image id 

   // do your code
}

html

<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover(this);"/></a>
<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover(this);" /></a>
<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover(this);" /></a>
<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover(this);" /></a>
于 2013-09-28T18:06:22.810 回答