Creating a Rollover Effect

Creating a Rollover Effect : Mouse Event : Event JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Event » Mouse Event »

Creating a Rollover Effect



/*

Learn How to Program Using Any Web Browser
by Harold Davis 

Apress CopyRight 2004

ISBN: 1590591135
*/

<HTML>
<HEAD>
<TITLE>Visualize Your Butterfly!</TITLE>
</HEAD>
<BODY>
<H1>    Visualize Your Butterfly!    </H1>
<H2>    Pass your mouse over a pattern to see the butterfly wearing it!    </H2>
<TABLE cellpadding=5 cellspacing=10>
<TR>
<td><IMG src="white.gif" height=100 width=175 border=0></TD>
<TD>
<IMG src="http://www.navioo.com/style/logo.png" height=75 width=75 border=2 
      onMouseOver="document.images[0].src='http://www.navioo.com/style/logo.png'"; 
      onMouseOut="document.images[0].src='http://www.navioo.com/style/logoRed.png';">
</TD>
<TD>
<IMG src="http://www.navioo.com/style/logo.png" height=75 width=75 border=2 
      onMouseOver="document.images[0].src='http://www.navioo.com/style/logo.png';" 
      onMouseOut="document.images[0].src='white.gif';">
</TD>
<TD>
<IMG src="http://www.navioo.com/style/logo.png" height=75 width=75 border=2 
      onMouseOver="document.images[0].src='http://www.navioo.com/style/logo.png';" 
      onMouseOut="document.images[0].src='http://www.navioo.com/style/logoRed.png';">
</TD>
<TD>
<IMG src="http://www.navioo.com/style/logo.png" height=75 width=75 border=2 
      onMouseOver="document.images[0].src='http://www.navioo.com/style/logo.png';" 
   onMouseOut="document.images[0].src='http://www.navioo.com/style/logoRed.png';">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>