在HTML和JavaScript中的图像事件

Question

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

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

这是完美的工作，但我想知道是否有某种事件持有的图像，当它已被点击，为了知道在哪个区域我正在工作。

我希望我已经说清楚了。

假设我有SECTION 1, SECTION 2, SECTION 3。因此，当我选择SECTION 1时，图像SECTION 1似乎被选中了我在该SECTION上工作的时间。如果我更改为SECTION 2，则只有SECTION 2的图像被选中，依此类推!

Answer 1

你可以尝试使用jquery hover来保持当前的动作。

小提琴的例子:

<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过滤器，使用背景属性。请看这个css示例

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

Answer 2

onclick事件呢?

Answer 3

我强烈建议使用CSS:hover psuedoselector，而不是将处理程序绑定到onmouseover和onmouseout事件。

Answer 4

这可能会有所帮助:http://jsfiddle.net/BGurung/UDceq/

我创建了一个标志，告诉图像是否被点击。在鼠标退出时，如果图像被单击，则将标志设置为false并返回，其他只是更改图像的来源。

Answer 5

听起来你想要onmousedown &Onmouseup，但这取决于你在做什么。

查看规格以获取更多信息:

http://www.w3.org/TR/DOM-Level-2-Events/