Simple Image Fade Script - Position Images In Centre

[miocene]

OK I am very new to js so go easy..I found this script which for fading images which is great because it just need the one lump of code to work without any seperate CSS files and the like.I have got it to work on my site with one minor issue: In the code you specify the image size, which doesn't actually resize the images used but just makes a viewable area of that size. I chose 572x400. I then made all my images' maximum size no bigger than that dimension in my image editor so the whole of each image may be viewed.However this code positions the image at the top-left of the 572x400 area. Many of my images have a width smaller than 572px (to fit in whilst maintaining aspect ratio) and as such are position slightly to the left - thus appearing off-centre.Can I modify this code easily to have the image displayed in the centre of the viewing area?Here is the js code:

<!--/***********************************************-***********************************************/var slideshow_width='572px' //SET IMAGE WIDTHvar slideshow_height='402px' //SET IMAGE HEIGHTvar pause=3700 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)var fadeimages=new Array()//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:fadeimages[0]=["default2/img_0122.jpg", "", ""] //plain image syntaxfadeimages[1]=["default2/img_0520.jpg", "", ""] //plain image syntaxfadeimages[2]=["default2/img_0812.jpg", "", ""] //plain image syntaxfadeimages[3]=["default2/img_0908.jpg", "", ""] //plain image syntaxfadeimages[4]=["default2/img_0910.jpg", "", ""] //plain image syntaxfadeimages[5]=["default2/img_0912.jpg", "", ""] //plain image syntax////NO need to edit beyond here/////////////var preloadedimages=new Array()for (p=0;p<fadeimages.length;p++){preloadedimages[p]=new Image()preloadedimages[p].src=fadeimages[p][0]}var ie4=document.allvar dom=document.getElementByIdif (ie4||dom)document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></ div></ div>')elsedocument.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')var curpos=10var degree=10var curcanvas="canvas0"var curimageindex=0var nextimageindex=1function fadepic(){if (curpos<100){curpos+=10if (tempobj.filters)tempobj.filters.alpha.opacity=curposelse if (tempobj.style.MozOpacity)tempobj.style.MozOpacity=curpos/101}else{clearInterval(dropslide)nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)tempobj.innerHTML=insertimage(nextimageindex)nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)tempobj2.style.visibility="hidden"setTimeout("rotateimage()",pause)}}function insertimage(i){var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</ a>' : tempcontainerreturn tempcontainer}function rotateimage(){if (ie4||dom){resetit(curcanvas)var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)crossobj.style.zIndex++tempobj.style.visibility="visible"var temp='setInterval("fadepic()",50)'dropslide=eval(temp)curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"}elsedocument.images.defaultslide.src=fadeimages[curimageindex][0]curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0}function resetit(what){curpos=10var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)if (crossobj.filters)crossobj.filters.alpha.opacity=curposelse if (crossobj.style.MozOpacity)crossobj.style.MozOpacity=curpos/101}function startit(){var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)crossobj.innerHTML=insertimage(curimageindex)rotateimage()}if (ie4||dom)window.onload=startitelsesetInterval("rotateimage()",pause)//-->

Edited June 20, 2009 by miocene

[justsomeguy]

You can add a margin property to each of the divs that it uses to hold the images. An auto margin means the same margin on either side, i.e. centered.document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10; margin: 0 auto;"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden; margin: 0 auto;"></ div></ div>')