Onclick(), Onmouseover() And Onmouseout() With Image

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

Solution 1:

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

Solution 2:

Why are you not using JQuery?

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

Solution 3:

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.

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 repitionif(!$(this).hasClass('clicked')){
               $(this).addClass('clicked');
               // code to change the source
       }
});

Thats it

Solution 4:

are you using jquery? then you can do this

$('#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");
    });