Conveyor Belt Slide Show Img + Text??

[rxsid]

Script: Converyor Belt Slide Show
http://www.dynamicdrive.com/dynamici...rightslide.htm

Hi all,

I've gotten this script to work great basically as is. However, I'm trying to add text that are above each image, as well as links that are next to each respective image. I've tried many different things such as (i have 10 images [9] in the array:

leftrightslide[0]='<table><tr><td>Synergy Multi-Vitamin<a href="http://someURL.com" target="win"><img src="images/someImg.gif border=0></a></td></tr></table>'
//and
leftrightslide[0]='<td>Synergy Multi-Vitamin<a href="http://someURL.com" target="win"><img src="images/someImg.gif border=0></a></td>'
//and
leftrightslide[0]='Synergy Multi-Vitamin<a href="http://someURL.com" target="win"><img src="images/someImg.gif border=0></a><br>'

and many others...but I get all kinds of wierd results non of which allow me to place text above each image then essentially <br> to the image. Also not able to place text next to respective image.

Any ideas?

Thanks.

[jscheuer1]

After messing around with this script more than I probably should have, I did discover a way to add text above each image but, that is a bad idea. I see no attempt made to add:

links that are next to each respective image

in the code from your post unless you mean the built in link availability of the images to have links that is already in this script.

The reason it is a bad idea to add text above each or any of the images in the sliding display is that text size, unlike image size, cannot be controlled independently from the user agent (people's browsers). So, even if you get it looking good on your browser, you have no idea how it will look on other folks' browsers. A better approach would be to add onmouseOver/onmouseOut events to each image that would display descriptive text above or below the sliding display when the image is hovered over. You could leave plenty of room for this so that no matter what size the text was displayed as, it would still look reasonable. Here's how:

Add this right before the script:

<table><tr><td align="center" id="caparea">&nbsp;</td></tr><tr><td>

and this right after it:

</td></tr></table>

Change the leftrightslide Array to look like this:

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img onmouseOver=dcap("0") onmouseOut=dcap() src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img onmouseOver=dcap("1") onmouseOut=dcap() src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img onmouseOver=dcap("2") onmouseOut=dcap() src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img onmouseOver=dcap("3") onmouseOut=dcap() src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img onmouseOver=dcap("4") onmouseOut=dcap() src="dynamicbook5.gif" border=1></a>'

Add this Array just above it:

//Specify Captions
var cap=new Array()
cap[0]='Synergy Multi-Vitamin'
cap[1]='Description #2 Here'
cap[2]='Description #3 Here'
cap[3]='Description #4 Here'
cap[4]='Description #5 Here'

Add this function:

function dcap(theCap){
if (theCap==undefined)
document.getElementById('caparea').innerHTML=' '
else
document.getElementById('caparea').innerHTML=cap[theCap]
}

just below the line:

////NO NEED TO EDIT BELOW THIS LINE////////////

That's it!