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

2 Flares Twitter 1 Facebook 0 Google+ 1 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 2 Flares ×

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')");
            });
        });
2 Flares Twitter 1 Facebook 0 Google+ 1 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 2 Flares ×
  • 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?

2 Flares Twitter 1 Facebook 0 Google+ 1 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 2 Flares ×