Spread the word

Wednesday, July 9, 2008

Simplest way to change images on Mouse Over through JavaScript

Many times we use to give some effects when users mouse overs an element. Sometimes we change the colors, sometimes we change sizes. Many times we also change the images on which users put their mouses on. Many times we use to change the texts in the images which is also done by changing the whole image on mouse over. Many times we see that images remain totally same on mouse over, just the color of the image is changed, which is also done by changing the whole image.



Many times we may have used large JavaScript files to achieve this effect to change images on mouse overs. Here is the simplest way to change the images on mouse over through JavaScript. You need to assign a name for the image you want to change. Then you can use JavaScript on the properties of the image, identifying it by its name. Just using the following code, you can access the Image class of JavaScript and play with its properties. Just checkout the simplest example.
<html>
<head>
    <script language="Javascript">
        image1=new Image
        image1.src="/images/picture1.jpg"
        image2=new Image
        image2.src="/images/picture2.jpg"
    </script>
</head>
<body>
<a href="location1.htm" onMouseOver="document.picture.src=image2.src" onMouseOut="document.picture.src=image1.src" >
    <img name="picture" src="/images/picture1.jpg" alt="My Image" />
</a>
</body>
</html>

This is a very light and easy way to do this task. Its very effective and does the job satisfactorily.

14 comments:

nour said...

thanks man..it worked for me and it very simple too

Anonymous said...

nice solution!!!

Anonymous said...

yes, realy simple! and nice!
ME

william h. arthur iv said...

nice... can i get this to work for two different sets of images on the same page?

Acmeous said...

Yes definitely.
Just declare all the image paths in the head section, and then call onMouseOver & onMouseOut of every image properly.

Anonymous said...

Thanks, works perfect

Anonymous said...

I can't understand this part : document.picture.src=image2.src , ex. i have pictures on my folder called images, so how would be the following code document.picture.src=image2.src , cause i can't understand ?

Manoj said...

thank you so much!

Tim said...

Very nice! It worked for me, Even though i use a free website making site (MOONFRUIT) Im still able to code out my website! And the biggest problem i had was to get slideshows and graphics changing, Now its very easy! Thanks alot!

Anonymous said...

it works fine but I have a problem with if I have to images side by side the second image doesn't work for the hover effect?

Anonymous said...

thx

manish bhatt said...

thank you its working

Sana said...

Thanks for the code. It worked beautifully ! However what changes do I have to make if I want SAME EFFECT but not on mouseover the image, but mouseover the logo/link. I need the same effect that is Picture1 should change to Picture2 BUT only on mouseover on the LOGO/LINK
Thank you !!! Eagerly waiting for your reply....

Acmeous said...

Hi Sana, thanks for visiting my blog. Can you please contact me via the contact form at the top right of the site, so that I can understand your problem and help you out.

Post a Comment