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 namefor 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>
Posts
0 comments:
Post a Comment