Hi,

I really like this slideshow here: http://www.dynamicdrive.com/dynamici...nslideshow.htm and want to try overlaying some CSS elements onto it.
So the 2 elements would be in the image area, on top of it, as it fades in and out.

I'm trying to position the tall rectangle to the left and the long rectangle at the bottom of the background image.

Here's my code:
PHP Code:
<html>

<
head>
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", ""],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>

<body>

<div style="background:#000;width:80px;height:150px">&nbsp;</div>
<div style="background:#666;width:250px;height:30px">&nbsp;</div>
<div id="fadeshow1"></div>

</body>

</html> 
What is the best way to achieve this?


Many thanks for any pointers.