1

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

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

4 回答 4

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"
    );
});
于 2013-05-16T06:20:49.790 回答
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');
    });
});
于 2013-05-16T06:23:24.743 回答
1

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

如果该类不存在，则继续，否则 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
       }
});

就是这样

于 2013-05-16T06:22:53.743 回答
0

你在用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");
    });
于 2013-05-16T06:24:13.600 回答