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);
    var 
timer 0;

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

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

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

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!!!