带有图片的onClick（），onMouseOver（）和onMouseOut（）

Question

到目前为止，我已经完成此工作，以便它具有“基本”图像，单击图像，然后将图像更改为“活动图像”，但是我不希望当您将鼠标移出该图像时将其还原为原始图像已被单击-我希望它保留在单击图像上，直到单击另一个图像为止。

这是我的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'";

Answer 1

为什么不使用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 2

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');
    });
});

Answer 3

单击图像后，可以将其添加到图像中，然后在鼠标悬停功能中测试该图像是否具有该类。

如果该类不存在，请继续，否则preventDefault。

就像是

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

在点击事件中使用

$('.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", "/design/zebra/images/booking/1stolik.png");
    },
    function () {
       //hover out event 
       $(this).attr("src", "/design/zebra/images/booking/1stolik_clicked.png");
    });