Advertise on Site! You can Advertise on our site. Find out More

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

Add a Comment

Your email address will not be published. Required fields are marked *