FadeOut Images

[Jessi]

Hello!

I'm one of the maintainers of this website (http://www.billopan.com), and need a little help adding to the javascript fadeout images on the right menu.

I want to add two matching icons to that list (this one (http://www.billopan.com/staff/painted_robot.gif) and this one (http://www.billopan.com/staff/draikaphobic.gif)), but I have no earthly idea how to go about doing that. :p The creator of the site, who is also the only one who's familiar with javascript, is no longer around.

This is the code for the ones already posted:


<script language="javascript" type="text/javascript"><!--fader();//--></script>


<!-- blog images -->

<center>
<img src="images/hdcouncil.gif" border="0" alt="council news/status">
</center><br>

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td background="lil/divisor_off.gif"><a href="staff.php#divisor" onMouseOver="JSFX.fadeIn('divisor')" onMouseOut="JSFX.fadeOut('divisor')"><img name="divisor" src="lil/divisor_off.gif" width="50" height="50" border="0" class="imgFader" alt="-divisor- : divisor / neopianorphanage"></a></td>

<td width="10"><img src="images/bl.gif" width="10" height="1" border="0"></td>

<td background="images/goldkitcat_00_off.gif"><a href="staff.php#cat" onMouseOver="JSFX.fadeIn('cat')" onMouseOut="JSFX.fadeOut('cat')"><img name="cat" src="images/goldkitcat_00_off.gif" width="50" height="50" border="0" class="imgFader" alt="-cat- : kitcat_00"></a></td>

</tr>

<tr>
<td colspan="3" height="10"><img src="images/bl.gif" height="10" width="1" border="0"></td>
</tr>

<tr>
<td background="images/goldhava_off.gif"><a href="staff.php#hava" onMouseOver="JSFX.fadeIn('hava')" onMouseOut="JSFX.fadeOut('hava')"><img name="hava" src="images/goldhava_off.gif" width="50" height="50" border="0" class="imgFader" alt="-hava- : havaheart / purestofevil"></a></td>

<td width="10"><img src="images/bl.gif" width="10" height="1" border="0"></td>

<td background="images/goldmiraged_off.gif"><a href="staff.php#miraged" onMouseOver="JSFX.fadeIn('miraged')" onMouseOut="JSFX.fadeOut('miraged')"><img name="miraged" src="images/goldmiraged_off.gif" width="50" height="50" border="0" class="imgFader" alt="-Jen- : miraged"></a></td>

</tr>

<tr>
<td colspan="3" height="10"><img src="images/bl.gif" height="10" width="1" border="0"></td>
</tr>

</table>

If someone has enough time to code one of the two icons for me, and walk me through the process in small steps so I can attempt the second, I would very much appreciate it. :D I was so happy when I found this forum through Google - I had hope that the council images could be updated at long last!

Thanks so much in advance!

[jscheuer1]

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td background="lil/divisor_off.gif"><a href="staff.php#divisor" onMouseOver="JSFX.fadeIn('divisor')" onMouseOut="JSFX.fadeOut('divisor')"><img name="divisor" src="lil/divisor_off.gif" width="50" height="50" border="0" class="imgFader" alt="-divisor- : divisor / neopianorphanage"></a></td>

<td width="10"><img src="images/bl.gif" width="10" height="1" border="0"></td>

<td background="images/goldkitcat_00_off.gif"><a href="staff.php#cat" onMouseOver="JSFX.fadeIn('cat')" onMouseOut="JSFX.fadeOut('cat')"><img name="cat" src="images/goldkitcat_00_off.gif" width="50" height="50" border="0" class="imgFader" alt="-cat- : kitcat_00"></a></td>

</tr>

<tr>
<td colspan="3" height="10"><img src="images/bl.gif" height="10" width="1" border="0"></td>
</tr>

<tr>
<td background="images/goldhava_off.gif"><a href="staff.php#hava" onMouseOver="JSFX.fadeIn('hava')" onMouseOut="JSFX.fadeOut('hava')"><img name="hava" src="images/goldhava_off.gif" width="50" height="50" border="0" class="imgFader" alt="-hava- : havaheart / purestofevil"></a></td>

<td width="10"><img src="images/bl.gif" width="10" height="1" border="0"></td>

<td background="images/goldmiraged_off.gif"><a href="staff.php#miraged" onMouseOver="JSFX.fadeIn('miraged')" onMouseOut="JSFX.fadeOut('miraged')"><img name="miraged" src="images/goldmiraged_off.gif" width="50" height="50" border="0" class="imgFader" alt="-Jen- : miraged"></a></td>

</tr>

<tr>
<td background="staff/painted_robot.gif"><a href="staff.php#robot" onMouseOver="JSFX.fadeIn('robot')" onMouseOut="JSFX.fadeOut('robot')"><img name="robot" src="staff/painted_robot.gif" width="50" height="50" border="0" class="imgFader" alt="-robot- : painted_robot "></a></td>

<td width="10"><img src="images/bl.gif" width="10" height="1" border="0"></td>

<td background="staff/draikaphobic.gif"><a href="staff.php#draik" onMouseOver="JSFX.fadeIn('draik')" onMouseOut="JSFX.fadeOut('draik')"><img name="draik" src="staff/draikaphobic.gif" width="50" height="50" border="0" class="imgFader" alt="-Draikaphobic- : "></a></td>

</tr>
<tr>
<td colspan="3" height="10"><img src="images/bl.gif" height="10" width="1" border="0"></td>
</tr>

</table>Other than throwing off the rest of the page layout, position wise, that should get it. The alt="...." can be whatever you want, it describes the image. Mmmm, a walk through:

The pattern I observed is that the background is set to the image. This looks irrelevant to me as I think it is an invalid attribute but, it helps label the table cell. The href is set to an arbitrary anchor name reference within the document itself, this name is used later for the image name and referenced in the javascript calls of the mouseover and mouseout events. The src for the image is the image itself, the class is important, as this will set the initial fade of the image using style rules already in the stylesheet (under a header that looks like this: '.imgFader'). The name for the image is, as I said before, the same as the anchor reference and the parameter passed to the script for the mouse events. Alt is whatever you want.