How to change the image of on MouseOver Event using JavaScript or CSS

If you want to change the image on rollover or mouseover event. This is very old technique. You can achieve this using CSS or javascript. I given the simple and powerful code javascript mouse event. I tested this code. It works on all the browsers.

With CSS you can use the following code


.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });

You may like following Articles!

  • http://the-business-cards.info Leo Blesofsky

    I’ve been checking your blog for a while now, seems like everyday I learn something new :-) Thanks

  • http://uautoclub.com Stacia Aipopo

    I was just having a conversation over this I am glad I came across this it cleared some of the questions I had.

  • http://treatmentfor-hemorrhoids.info Pete Widrick

    Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?