I have found a great fade out fade in function that I'm trying to adapt here:
http://www.brainerror.net/scripts_js_blendtrans.php (see fade in and out with one link)

The javascript that runs this fade in out is:

PHP Code:
function opacity(idopacStartopacEndmillisec) {
//speed for each frame
var speed Math.round(millisec 100);
timer 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart opacEnd) {
opacStart>= opacEndi--) {
setTimeout("changeOpac(" ",'" id "')",(timer speed));
    } else if(
opacStart opacEnd) {
opacStart<= opacEndi++)
setTimeout("changeOpac(" ",'" id "')",(timer speed));

//change the opacity for different browsers
function changeOpac(opacityid) {
object document.getElementById(id).style
object.opacity = (opacity 100);
object.MozOpacity = (opacity 100);
object.KhtmlOpacity = (opacity 100);
object.filter "alpha(opacity=" opacity ")";

shiftOpacity(idmillisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
    } else {

What I need to happen is have the image hidden when the page is loaded and when the hide/show link is pressed have it fade in.

So essentially what I'm looking for is a FADE IN and FADE OUT function rather than a FADE OUT and FADE IN function.

Can someone please help me out with this? I can't seem to figure it out!!!!

Thanks everyone!!!