CODEWITHSUNDEEP
javascriptasp.net
Subbu
Subbu

Reputation: 37

Mouse enter and mouse leave events in asp.net

I have 4 image buttons. I wrote some JavaScript code for changing the color of image on mouseenter. Also on mouseleave, it will back to the original state as shown below.

<script language="javascript" type="text/javascript">             
    function mouseOverImage(Id) {                       
       document.getElementById(Id).src = "Images/Yellow.png";
    }

    function mouseOutImage(Id) {    
       document.getElementById(Id).src = "Images/TestImage.png";                 
    }
</script>

If I click on button1, I have to change the color to yellow and mouse leave event could not be fired on this situvation.

If I click on button2, button1 should back to original state.

Can anyone help?

Upvotes: 1

Views: 1602

Answers (2)

Raver0124
Raver0124

Reputation: 522

Its easier if you use jQuery, Here's some sample code

$('#button1').on('click', function () {
    //button 1 click event goes here
    $(this).css("background-image", "url(Images/Yellow.png)");
});

$('#button1').hover(
    function () {
        //button 1 hover event
    },
    function () {
       //button 1 hover out event 
    });

$('#button2').on('click', function () {
    //button 2 click event goes here
    $('#button1').css("background-image", "url(Images/Original.png)");
});

Upvotes: 2

&#214;mer Faruk Aplak
&#214;mer Faruk Aplak

Reputation: 911

you can try,

 $(document).on(
    {
        mouseenter: function () {

        },
        mouseleave: function () {

        }
    }, '.chat-button');

chat-button is -> button2 and button1 client id

jquery 1.9.x

Upvotes: 0

Related Questions