onClick（），onMouseOver（）和onMouseOut（）与图像

到目前为止，我已经有了这个工作，因此它有一个“基本”图像，点击图像，并将图像更改为“活动图像，但我不希望它在鼠标移出时恢复原始图像，如果图像已单击 – 我希望它保持在单击图像上，直到单击另一个图像。

这是我的HTML

在js会是这样的

 onmouseover="image.src='/design/zebra/images/booking/1stolik_aktiv.png'"; onmouseout="image.src='https://stackoverflow.com/design/zebra/images/booking/1stolik.png'"; onClick="image.src='/design/zebra/images/booking/1stolik_clicked.png'"; 

Answer 1

HTML

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','https://stackoverflow.com/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','https://stackoverflow.com/design/zebra/images/booking/1stolik.png'); }); }); 

Answer 2

你为什么不使用JQuery？

 $(document).ready(function(){ var clicked = false; $("#img").on({ mouseenter: function (event) { if(clicked) return false; $(this).attr('src','new.jpg'); }, mouseleave: function (event) { if(clicked) return false; $(this).attr('src','new.jpg'); }, click: function (event) { clicked = true; $(this).attr('src','new.jpg'); } }, "body" ); }); 

Answer 3

您可以在单击图像后将其添加到图像中，如果此图像具有该类，则可以在鼠标hoverfunction测试中添加。

如果class级不在那里继续，否则preventDefault。

就像是

 $('.image').mouseover(function(){ if(!$(this).hasClass('clicked')){ // code to change source here } }); 

在click事件中使用

 $('.image').click(function(){ // to avoid repition if(!$(this).hasClass('clicked')){ $(this).addClass('clicked'); // code to change the source } }); 

而已

Answer 4

你在用jquery吗？ 然后你就可以做到这一点

 $('#img').on('click', function () { //click event goes here $(this).attr("src", "/design/zebra/images/booking/1stolik_aktiv.png"); }); $('#img').hover( function () { //hover event $(this).attr("src", "https://stackoverflow.com/design/zebra/images/booking/1stolik.png"); }, function () { //hover out event $(this).attr("src", "/design/zebra/images/booking/1stolik_clicked.png"); });