Using only javascript and CSS you can easily achieve mouseover effect. In article we given sample code for change image of on MouseOver Event in your site.

change image of on MouseOver Event using JavaScript or CSS

change image of on MouseOver Event using JavaScript or CSS

change 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

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

If you are using the Jquery then use following code:

<div class="imagediv"/>

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

Written by Purab Kharat

I am Purab , a Blogger. I worked as WordPress and Drupal Architect and consultant. I worked on many technologies like Wordpress, Drupal, Ruby on Rails, Flex, PHP, jQuery etc... Senior Technical Lead at Smartsourcing Global Pvt Ltd in Princeton, NJ, USA.I contributor of many wordpress plugins and Drupal Modules. I am core developer of Drupal.Connect to purab on LinkedIn or Follow @purab on Twitter or Follow me on Google+ or Write Mail to or Chat with me on Skype : purabdk

Loading Facebook Comments ...

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>