Hi there,

I was wondering how I can add the fade in and out effect of this slideshow. Do I need to rewrite the entire code?

http://www.soojincha.com/gilbertli

---------code-------------------

<SCRIPT LANGUAGE="javascript">



function show_next() {
document.right.src = Image3.src; return true;
}

function show_back() {
document.left.src = Image2.src; return true;
}

function show_orig_rightside() {
document.right.src = Image1.src; return true;
}
function show_orig_leftside() {
document.left.src = Image4.src; return true;
}

</SCRIPT>

<SCRIPT LANGUAGE="javascript">

Image1 = new Image(40,980)
Image1.src = "images/pg_white.png"

Image4 = new Image(40,980)
Image4.src = "images/pg_white.png"

Image2 = new Image(40,980)
Image2.src = "images/pg_shadow-back.png"

Image3 = new Image(40,980)
Image3.src = "images/pg_shadow-next.png"

</SCRIPT>


<script type="text/javascript">

var ImgArray = [
"images/project-alphabetcity/alphabetcity1.jpg",
"images/project-alphabetcity/alphabetcity2.jpg",
"images/project-alphabetcity/alphabetcity3.jpg",
"images/project-alphabetcity/alphabetcity4.jpg",
"images/project-alphabetcity/alphabetcity5.jpg",
"images/project-alphabetcity/alphabetcity6.jpg"
];

var PageNumArray = [
"images/page_numbers/pg_number-1.png",
"images/page_numbers/pg_number-2.png",
"images/page_numbers/pg_number-3.png",
"images/page_numbers/pg_number-4.png",
"images/page_numbers/pg_number-5.png",
"images/page_numbers/pg_number-6.png"
];

var MyGlobVar;

function ChangeImg(imgPtr,Pos) {

if (Pos == 'B' && imgPtr >=1)
imgPtr = imgPtr - 1;
else if (Pos == 'B' && imgPtr ==0)
imgPtr = ImgArray.length-1;
else if (Pos == 'N' && imgPtr <=4)
imgPtr = imgPtr + 1;
else if (Pos == 'N' && imgPtr == 5)
imgPtr = 0;
else if (Pos == 'H' && imgPtr == 0)
imgPtr = 0;




document.getElementById('bgbooks').style.backgroundImage = "url(" + ImgArray[imgPtr] + ")";
document.getElementById('CommonImg').style.backgroundImage = "url(" + PageNumArray[imgPtr] + ")";
MyGlobVar = imgPtr;
}



</script>