Change Image on mouse event

94 views

Small and simple Javascript Codes to change/alter image from older to new one then again change to earlier image when roll out from image.
In the image roll-over/alter_image script of the previous session, the code for changing the image was placed inside the event handlers. This is fine if there are one or two images. In case of several images, it is advisable to pack the code in a function that can be called repeatedly by event handlers using different parameters.
This section should be placed in head.
<head>
<script type="text/javascript">
function alter_image(image_src,image_name)
   {
   document[image_name].src = image_src;
   }
</script>
</head>
This section should be placed in body.
<body>
<a href="javascript:void(0);" onmouseover="alter_image(’image/photo2.jpeg’,'image1′)" onmouseout="alter_image(’image/photo1.jpeg’,'image1′)">
<img src="image/photo1.jpeg" name="image1" border="0">
</a>
</body>

Demo:

Tags: Javascript, mouse event, onmouseout, onmouseover, Tips and tricks

« Widely Used Keyboard Shortcuts…	Oracle ends Exadata machine model tie-up with HP »
Posted on Friday, September 18th, 2009 at 5:25 pm under Javascript, Javascript For Beginners \| RSS 2.0 Feed

One Response to “Change Image on mouse event”

admin Says:
September 18th, 2009 at 6:06 pm
I don’t want to make second post with the same title although difference in methods.So you can also use..
[ means < and ] means >.
function alter_image(image_src,image_name)
{

document.getElementById(image_name).src=image_src;
}

[anchor href="javascript:void(0);" onmouseover="alter_image('image/photo2.jpeg','image1')" onmouseout="alter_image('image/photo1','image1')" ]
[image1]
[/anchor]
Try this it also work the same.
only with slight changes as id and use of getElementById.

Post Comment

You must be logged in to post a comment.