This has got to be really easy, but for some reason it's giving me a lot of trouble.
Currently, when I mouse over an image, the image just changes. What I would like to happen is that the image will fade slowly (ie, over a period of 2 seconds). Here's how the page looks right now:
Any help would be greatly appreciated.
-------------------------
Just call me Captain Awesome.
Currently, when I mouse over an image, the image just changes. What I would like to happen is that the image will fade slowly (ie, over a period of 2 seconds). Here's how the page looks right now:
Code:
<HTML>
<HEAD>
<LINK HREF="styles.css" REL="stylesheet" TYPE="text/css">
</HEAD>
<BODY>
<script language="Javascript1.1">
<!--
function yaImgChange(imgNum,imgSrc) {
document.images[img]um[/img].src = imgSrc;
}
// -->
</script>
<CENTER>
<TABLE>
<TR><TD><IMG NAME="Grande" SRC="Images/grande_band_bw.jpg" onMouseOver="yaImgChange('Grande', 'Images/grande_band.jpg');" onMouseOut="yaImgChange('Grande', 'Images/grande_band_bw.jpg');"></TD>
<TD><IMG NAME="Trevor" SRC="Images/trevor_band_bw.jpg" onMouseOver="yaImgChange('Trevor', 'Images/trevor_band.jpg');" onMouseOut="yaImgChange('Trevor', 'Images/trevor_band_bw.jpg');"></TD></TR>
<TR><TD><CENTER>Grande - Guitar</CENTER></TD>
<TD><CENTER>Trevor - Vocals</CENTER></TD></TR>
<TR><TD><IMG NAME="Shawn" SRC="Images/shawn_band_bw.jpg" onMouseOver="yaImgChange('Shawn', 'Images/shawn_band.jpg');" onMouseOut="yaImgChange('Shawn', 'Images/shawn_band_bw.jpg');"></TD>
<TD><IMG NAME="Brandon" SRC="Images/brandon_band_bw.jpg" onMouseOver="yaImgChange('Brandon', 'Images/brandon_band.jpg');" onMouseOut="yaImgChange('Brandon', 'Images/brandon_band_bw.jpg');"></TD></TR>
<TR><TD><CENTER>Shawn - Bass</CENTER></TD>
<TD><CENTER>Brandon - Drums</CENTER></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>Any help would be greatly appreciated.
-------------------------
Just call me Captain Awesome.