Question

到目前为止，我已经完成了这项工作，因此它有一个基本的＆＃34;图像，单击图像，并将图像更改为＆＃34;活动图像，但如果图像已被点击，我不希望它在鼠标移出时恢复原始图像 - 我希望它保持不变单击图像直到单击另一个图像。

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

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

4 个答案: