Need help adding fade effect to my Javascript slide show

[hangman21]

my coding is on the next post below since its long, but all help is appreciated, thanks alot

---------- Post added at 01:01 AM ---------- Previous post was at 12:51 AM ----------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow/image001.jpg"
var image2=new Image()
image2.src="images/slideshow/image002.jpg"
var image3=new Image()
image3.src="images/slideshow/image003.jpg"
var image4=new Image()
image4.src="images/slideshow/image004.jpg"
var image5=new Image()
image5.src="images/slideshow/image005.jpg"
var image6=new Image()
image6.src="images/slideshow/image006.jpg"
var image7=new Image()
image7.src="images/slideshow/image007.jpg"
var image8=new Image()
image8.src="images/slideshow/image008.jpg"
var image9=new Image()
image9.src="images/slideshow/image009.jpg"
var image10=new Image()
image10.src="images/slideshow/image010.jpg"
var image11=new Image()
image11.src="images/slideshow/image011.jpg"
var image12=new Image()
image12.src="images/slideshow/image012.jpg"
var image13=new Image()
image13.src="images/slideshow/image013.jpg"
var image14=new Image()
image14.src="images/slideshow/image014.jpg"
var image15=new Image()
image15.src="images/slideshow/image015.jpg"
var image16=new Image()
image16.src="images/slideshow/image016.jpg"
var image17=new Image()
image17.src="images/slideshow/image017.jpg"
var image18=new Image()
image18.src="images/slideshow/image018.jpg"
var image19=new Image()
image19.src="images/slideshow/image019.jpg"
var image20=new Image()
image20.src="images/slideshow/image020.jpg"
//-->
</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<20)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

 

[nasaboy007]

Your best bet would be to use jquery - look at http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm