How to create mouse over effect?

+2 votes
asked by anonymous

2 Answers

0 votes
simple image rollover example. on mouse over the image will change.

Put this code before </head> tag

<script type="text/javascript">
function mouseOver()
{
document.i1.src ="/images/img1.jpg"
}
function mouseOut()
{
document.i1.src ="/images/img2.jpg"
}
</script>


Put this code anywhere after <body> tag
<a href="yourWebsite.com/page"><img border="0" alt="image changed!" src="/images/img1.jpg" name="i1" width="100" height="100" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
answered by anonymous
0 votes
<!-- STEP ONE: Insert this code into the HEAD section of your HTML document  -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "mySite.com/image2.png";
staticImage1 = new Image();
staticImage1.src = "mySite.com/image1.png";

// End -->
</script>

<!-- STEP TWO: Insert this code into the BODY of your HTML document  -->

<a href="mySite.com/page1.html" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="mySite.com/image1.png" border=0></a>
answered by prince (1,370 points)
Powered by Question2Answer