javascript - HTML 和 JavaScript 中图像的事件

Question

我正在使用一个横幅，其中有一些按钮，我可以通过事件 onmouseover() 和 onmouseout() 控制，标签如下:

<img src="image_1.png" 
     onmouseover="this.src='image_2.png'"
     onmouseout="this.src='image_1.png'" />

这工作得很好，但我想知道在单击图像时是否有某种保持图像的事件，以便知道我正在处理哪个区域。

我希望我已经说清楚了。

假设我有第 1 部分、第 2 部分、第 3 部分。因此，当我选择第 1 部分时，图像第 1 部分似乎是在我正在处理该部分时选择的。如果我更改为 SECTION 2，则似乎仅选择了 SECTION 2 的图像，依此类推!

Answer 1

您可以尝试jquery悬停来保留当前操作。

fiddle example :

<img src="image_1.png" />

<script>
$('img').hover(
 function(){
   $(this).attr('src','image_2.png');
 },
 function(){
   $(this).attr('src','image_1.png');
 },
);
</script>

也许，其他选项可以是 css :hover 和 :active 过滤器，使用背景属性。 See this css example

.Myimg{
 display:block;
    width: 100px;
    height:100px;
    background-image:url('img1.jpg');
}

.Myimg:hover{
   background-image:url('img2.jpg');
}