Question

-2

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

rated 0 times [ 0] [ 2] / answers: 1 / hits: 30447 / 11 Years ago, thu, may 16, 2013, 12:00:00

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

      <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

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

answered 11 Years ago benitoh · Accepted Answer

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

    });

});