This is a little JavaScript tutorial exmplaining a simple technique to allow image rollovers with a fade effect. This works by creating two images, the main image (see 'IMAGE' in script) and a rollover image (see 'IMAGE_OVER in script).
The script then fades between these images using a dark colour fader:
You can download the image rollover script here.Either save this and link to it on your ftp server, or replace SOURCE with
http://www.beatsdesign.co.uk/Scripts/JSFX_FadingRollovers.js
The first code block below should go into the <head> section of your html document. In this instance, we are only applying this to one image, so this needs to be given a NAME (when using multiple images, just make different names for each). Then replace 'IMAGE_OVER' with your rollover image source:
<script language=JavaScript SRC="SOURCE" type="text/
javascript">
</script>
<script language="JavaScript">
FadeInStep=10;
FadeOutStep=5;
JSFX.Rollover("NAME", "IMAGE_OVER");
</script>
Then, create a table within the <body> section of your html document. The important concept here is that the main image ('IMAGE') must be the background of the table cell it is in - and therefore the cable cell has to be the same size of the image.
The script below shows a table set up with one cell. For multiple images, repeat <tr> (new row) and <td> (new column) tags where necessary.
Make sure the 'NAME' is the same as for the rollover image set up earlier:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td background="Images/IMAGE">
<A HREF="TARGET" target="_bottom"
onMouseOver="JSFX.fadeIn('NAME')"
onMouseOut="JSFX.fadeOut('NAME')">
<img name="NAME" class="imgFader"
src="IMAGE" height="HEIGHT"
width="WIDTH" border="0">
</A>
</td>
</tr>
</table>
That's it! Please remember to replace all the references in the above code ('NAME', 'IMAGE', 'IMAGE_OVER', 'SOURCE') with the relevant data, as described above.
