Hi, This is my first Jquery i have created so not sure if it is the function which is creating the issue or how i have set up the html or styles.

I have created a gallery for the website i am working on which includes thumbnails of the images and as the user hovers over the thumbnails a large image appears to the right. I have set it up so that the first image appears to the right as the page loads, but once the user starts hovering the image changes.

It took me a while to get to the point i am at due to my lack of experience with JQuery but am not stuck as to how to fix it.

Basically when you first load the page, the large image on the right has s bit of the next image inline below it. If you hover over the tumbnails slowly it works fine, but if you hover over them fast (changing between images), the same effect happens a small section of the next image shows below the large image. Another problam is it doesn't always happen, however it does when you re-load the page. Problem is all browsers!!

Here is the page: http://code-thesalon.com/newsite/gallery.html

Here is my html for the gallery section:

<div id="container" style="overflow: auto; width: 520px; height:337px; padding-right:8px; background-color:#ffffff; " class="content">

<p>Hover over the images to view them larger</p>



<!-- #2. for the disjointed rollovers -->


<!-- #3. Navigation Links to the left -->
<div id="photos">
<img id="g1" src="images/clear.png" alt="g1" />
<img id="g2" src="images/clear.png" alt="g2" />
<img id="g3" src="images/clear.png" alt="g3" />
<img id="g4" src="images/clear.png" alt="g4" />
<img id="g5" src="images/clear.png" alt="g5" />
<img id="g6" src="images/clear.png" alt="g6" />
<img id="g7" src="images/clear.png" alt="g7" />
<img id="g8" src="images/clear.png" alt="g8" />
<!-- button div end -->
</div>
<!-- container div end -->
</div>


<div id="images">
<div id="g1"><img src="images/g_1_Large.jpg" class="LargeImgSize" alt="One" /></div>
<div id="g2"><img src="images/g_2_Large.jpg" class="LargeImgSize" alt="Two" /></div>
<div id="g3"><img src="images/g_3_Large.jpg" class="LargeImgSize" alt="Three" /></div>
<div id="g4"><img src="images/g_4_Large.jpg" class="LargeImgSize" alt="Four" /></div>
<div id="g5"><img src="images/g_5_Large.jpg" class="LargeImgSize" alt="Five" /></div>
<div id="g6"><img src="images/g_6_Large.jpg" class="LargeImgSize" alt="Six" /></div>
<div id="g7"><img src="images/g_7_Large.jpg" class="LargeImgSize" alt="Seven" /></div>
<div id="g8"><img src="images/g_8_Large.jpg" class="LargeImgSize" alt="Eight" /></div>
</div>


<div id="orig">
<img src="images/g_1_Large.jpg" class="MainImgSize" alt="my image"/>
</div>


<div class="copywrightgallery">
<h3>Copyright &copy; Code The Salon</h3></div>
</div>


Here are the styles for the gallery:


.MainImgSize {

width: 40%;
position: absolute;
float: right;
z-index: 1000;
top: 30px;
right: 25px;



}


/* gallery styles */



/* #3. Button placement */
div#photos{
position:relative;
z-index:99;
}

div#images{

position: relative;
z-index: 900;
width: 40%;
position: absolute;
float: right;

top: 30px;
right: 25px;
}


.LargeImgSize{
width:100%;




}

/* #3. Navigation buttons to the left of disjointed images */
div#photos img{
position:relative;
width:110px;
height:146px;

}

/* #3. Make the Buttons Clickable */
img#g1 a, img#g2 a, img#g3 a, img#g4 a, img#g5 a, img#g6 a, img#g7 a, img#g8 a{
width:110px;
height:146px;
display:block;
}


/* #3. Normal Button States */
img#g1{background:url(images/g_1_ovr.jpg) no-repeat;}
img#g2{background:url(images/g_2_ovr.jpg) no-repeat;}
img#g3{background:url(images/g_3_ovr.jpg) no-repeat;}
img#g4{background:url(images/g_4_ovr.jpg) no-repeat;}
img#g5{background:url(images/g_5_ovr.jpg) no-repeat;}
img#g6{background:url(images/g_6_ovr.jpg) no-repeat;}
img#g7{background:url(images/g_7_ovr.jpg) no-repeat;}
img#g8{background:url(images/g_8_ovr.jpg) no-repeat;}

/* #3. Hover Button States */
img#g1:hover{background:url(images/g_1.jpg) no-repeat;}
img#g2:hover{background:url(images/g_2.jpg) no-repeat;}
img#g3:hover{background:url(images/g_3.jpg) no-repeat;}
img#g4:hover{background:url(images/g_4.jpg) no-repeat;}
img#g5:hover{background:url(images/g_5.jpg) no-repeat;}
img#g6:hover{background:url(images/g_6.jpg) no-repeat;}
img#g7:hover{background:url(images/g_7.jpg) no-repeat;}
img#g8:hover{background:url(images/g_8.jpg) no-repeat;}

/* End of gallery styles */


Here is the function.js:

//DISJOINTED ROLLOVERS USING BUTTON NAVIGATION AND IMAGES FADING IN AND OUT

$(document).ready(
function () {
//disjointed rollover function starting point
$("div#photos img").hover(
function ()
{
//make a variable and assign the hovered id to it
var elementId = $(this).attr('id');
//hide the image currently there
$("div#images div").hide();

$("div#orig").hide();
//fade in the image with the same id as the selected buttom
$("div#images div#" + elementId + "").fadeIn("slow");
});

});


This issue is really bugging me, if anyone knows what i have done wrong and how to rectify it will get me out of developing hell and be great karma for you!
Thanks