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.
This is a very light and easy way to do this task. Its very effective and does the job satisfactorily.
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:
thanks man..it worked for me and it very simple too
nice solution!!!
yes, realy simple! and nice!
ME
nice... can i get this to work for two different sets of images on the same page?
Yes definitely.
Just declare all the image paths in the head section, and then call onMouseOver & onMouseOut of every image properly.
Thanks, works perfect
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 ?
thank you so much!
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!
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?
thx
thank you its working
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....
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