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:
One Comment
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 a Comment