jQuery 带有图像的 onClick()、onMouseOver() 和 onMouseOut()

onClick(), onMouseOver() and onMouseOut() with image

提问by user2298672

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.

到目前为止，我已经完成了这项工作，因此它有一个“基本”图像，单击图像，然后将图像更改为“活动图像，但我不希望它在鼠标移开图像时恢复到原始图像已被点击——我希望它一直停留在点击图片上，直到点击另一张图片。

Here is my HTML

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

In js would be something like

在 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'";

回答by sdespont

Why are you not using JQuery?

你为什么不使用 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"
    );
});

回答by RST

HTML

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

CSS

#image1 {
    position: absolute;
    left: 103px;
    top: 300px;
}

jQuery

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

回答by Gaurav Mehra

You can add class to the image once its been clicked and in the mouseover function test if this image has that class.

您可以在单击图像后向图像添加类，并在鼠标悬停功能测试此图像是否具有该类。

In case the class is not there continue, else preventDefault.

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

some thing like

就像是

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

in the click event use

在点击事件中使用

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

Thats it

就是这样

回答by Raver0124

are you using jquery? then you can do this

你在用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");
    });