onClick(),onMouseOver()和onMouseOut()与图像 [英] onClick(), onMouseOver() and onMouseOut() with image
本文介绍了onClick(),onMouseOver()和onMouseOut()与图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
到目前为止,我已经有了这个工作,因此它有一个基本图像,点击图像,并将图像更改为活动图像,但我不希望它在鼠标移出时恢复原始图像如果图像已被点击 - 我希望它保持在点击图像上,直到点击另一个图像。
So far I've got this working so that it has a "basic" image, click image, and change image to "active image, but I don't want it to revert back to the original image when you mouse out if the image has been clicked--I want it to stay on the click image until another image is clicked.
这是我的HTML
<div id="booking_i">
<img id="img" src="/design/zebra/images/booking/1stolik.png">
<img id="img2" src="/design/zebra/images/booking/2stolik.png">
</div>
在js中就像
onmouseover="image.src='/design/zebra/images/booking/1stolik_aktiv.png'";
onmouseout="image.src='/design/zebra/images/booking/1stolik.png'";
onClick="image.src='/design/zebra/images/booking/1stolik_clicked.png'";
推荐答案
HTML
<div id="booking_i">
<img id="inage1" src="/design/zebra/images/booking/booking.png" />
<img id="img" src="/design/zebra/images/booking/1stolik.png" />
<img id="img2" src="/design/zebra/images/booking/2stolik.png" />
</div>
CSS
#image1 {
position: absolute;
left: 103px;
top: 300px;
}
jQuery
$(document).ready(function () {
$('#img').onMouseOver.attr('src','/design/zebra/images/booking/1stolik_active.png');
$('#img').click(function () {
this.attr('src', '/design/zebra/images/booking/1stolik_clicked.png');
$('#img2').attr('src','/design/zebra/images/booking/2stolik.png');
});
$('#img2').onMouseOver.attr('src','/design/zebra/images/booking/2stolik_active.png');
$('#img2').click(function () {
this.attr('src', '/design/zebra/images/booking/2stolik_clicked.png');
$('#img').attr('src','/design/zebra/images/booking/1stolik.png');
});
});
这篇关于onClick(),onMouseOver()和onMouseOut()与图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文