Creating Mouse over Effect in Images using Javascript
<html>
<head>
<script type=”text/javascript”>
function mouseOver()
{
document.logo.src=”blue_logo.gif” mce_src=”blue_logo.gif”
}
function mouseOut()
{
document.logo.src=”pink_logo.gif” mce_src=”pink_logo.gif”
}
</script>
</head>
<body>
<a href=”http://somesite.com” mce_href=”http://somesite.com” target=”_blank”>
<img border=”0″ src=”pink_logo.gif” mce_src=”pink_logo.gif” name=”logo” width=”30″ height=”30″ onmouseover=”mouseOver()” onmouseout=”mouseOut()” /></a>
</body>
</html>
In above example, we are displaying an image link in our we pages. On mouse over we are calling mouseOver() function and changing the image src.
In above case, by default “pink_logo.gif” is shown. On mouse over “blue_logo.gif” will be shown. Again On mouse out we are chaging image to “pink_logo.gif”.
This will give nice look and effect to our web pages.
