CodingForums.com - jQuery jQuery Fade

Index.php

Code:

        

<div id="fp_nav">

<ul>

        <a href="#"        id="fade2_link" class=""><li>Industrial Cleaning</li></a>

        <a href="#" id="fade3_link" class=""><li>Agricultural</li></a>

        <a href="#" id="fade4_link" class=""><li>Streets</li></a>

        <a href="#" id="fade5_link" class=""><li>Marine</li></a>

        <a href="#" id="fade6_link" class=""><li>Forestry</li></a>

        <a href="#" id="fade7_link" class=""><li>Fire Brigade</li></a>

</ul>

</div>

<div id="fader_img">

        <img id='fade1' src="images/fader/1_1.jpg" alt="Fader"/>

        <img id='fade2' src="images/fader/1_2.jpg" alt="Fader"/>

        <img id='fade3' src="images/fader/1_3.jpg" alt="Fader"/>

        <img id='fade4' src="images/fader/1_4.jpg" alt="Fader"/>

        <img id='fade5' src="images/fader/1_5.jpg" alt="Fader"/>

        <img id='fade6' src="images/fader/1_6.jpg" alt="Fader"/>

        <img id='fade7' src="images/fader/1_7.jpg" alt="Fader"/>

</div>

Jquery Fader

Code:

$(document).ready(function() {



        $('#fade2').hide();

        $('#fade3').hide();

        $('#fade4').hide();

        $('#fade5').hide();

        $('#fade6').hide();

        $('#fade7').hide();



//Default's

var default_image = 0;



//Hovers

var i = 0;



if (i == 0 && default_image != 1){

        $('#fade2_link').hover(

                function(){

                        $('#fade2').show();

                },

                function(){

                        $('#fade2').hide();

                }

        );

}





});

Im really not sure what i could do here,
I just wanted a simple fader, which does work if i hover over,
although when i click them i just wanted it to stay that image and not change that image. So it changes the default displayed picture.

Any help would be appreciated.
Thanks