Using Carousel script with Textual tooltip II (fade into view)

[manis.jain]

1) Script Title: Combining 'Carousel' and Textual tooltip II ' scripts

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel.htm
http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

3) problem:
'Carousel' script is amazing and I'm running it without any problems.
However, i am not able to add Textual tooltip II script along with it, and as soon as I try to add, with same script on same page, the 'carousel' script isn't shown at all anymore.
What do I need to do to run these two JavaScripts simultaneously!
so that when ever move is placed on any of the images in carousel, it gives a brief description of that image, below in the same window only.
thanks for your hints

[jscheuer1]

You mean like this:

http://home.comcast.net/~jscheuer1/side/c_fade/

You can view the source code to get the modified markup and on page scripts. The AnimatedFader.js external file is unaltered. Configuration for carousel is the same but its script is altered in a few places. The texts and colors are now in array at the bottom of my demo page added to the 2nd script for Textual tooltip II (fade into view):

<script type="text/javascript">
if (document.layers){
document.write('<ilayer name="nscontainer" width="100%" height="100">')
document.write('<layer name="fade1" width="100%" height="100">')
document.write('</layer></ilayer>')
}
else
document.write('<DIV ID="fade1"></DIV>')

/////////////added for carousel fade tip:

function fadeLoad(i){
var texts=new Array()
texts[0]=['<FONT SIZE=4 FACE=Verdana>Visit WA for comprehensive JavaScript tutorials and over 400+ free scripts!</FONT>', 'ff0000'];
texts[1]=['<FONT SIZE=4 FACE=Verdana>Click here for direct link to hundreds of free Java resources online</FONT>', 'ff0000'];
texts[2]=['<FONT SIZE=4 FACE=Verdana>The premier DHTML site online!</FONT>', 'ff0000'];
texts[3]=['Some other text', 'ff0000'];
fade_up('fade1', texts[i][0], texts[i][1]);
}
</script>

[manis.jain]

Hey the help was amazing, it works all the way i want it to be.
but still i am facing 2 problems:

1. I am using 5 images in the carousel and now each image is showing some text below it, but first time it shows correct text directed for the link, but after the carousel has moved once full, the image with text description got mismatched, it shows text below but text pointing for some other image.

2.After fading down the default color of text is black, but i am using a navy background, due to which when we move mouse the text for the last image is still visible in black. how could i change it as per my background color.

thanks again for your hints.

[jscheuer1]

Ooops, it worked with 4 images so, I just assumed . . . Often the worst thing to do. Anyways, I had in it the back of my mind that this might not work with all the possible number of images. You've brought that to the front. To make a long story short, the counter number used by the carousel is not a reliable indicator for the actual image showing (it relates to an image's position in the visible part of the carousel) so, we will have to test for the image itself. I've updated the demo, so you can take the code from there as before:

http://home.comcast.net/~jscheuer1/side/c_fade/

Make sure to refresh your browser if it isn't now showing 5 images. Configuration for carousel is still as it was but, the script code has been updated yet again, the AnimatedFader.js external file is still unaltered. I think I will also detail the 2nd script for Textual tooltip II (fade into view) as I did before, so you can better understand its new workings (new changes/additions red):

<script type="text/javascript">
if (document.layers){
document.write('<ilayer name="nscontainer" width="100%" height="100">')
document.write('<layer name="fade1" width="100%" height="100">')
document.write('</layer></ilayer>')
}
else
document.write('<DIV ID="fade1"></DIV>')

/////////////added for carousel fade tip:

function fadeLoad(el){
var texts=new Array()
texts[0]=['photo1.jpg', '<FONT SIZE=4 FACE=Verdana>Visit WA for comprehensive JavaScript tutorials and over 400+ free scripts!</FONT>', 'ff0000'];
texts[1]=['photo2.jpg', '<FONT SIZE=4 FACE=Verdana>Click here for direct link to hundreds of free Java resources online</FONT>', 'ff0000'];
texts[2]=['photo3.jpg', '<FONT SIZE=4 FACE=Verdana>The premier DHTML site online!</FONT>', 'ff0000'];
texts[3]=['photo4.jpg', 'Some other text', 'ff0000'];
texts[4]=['photo5.jpg', 'Some other text for image 5', 'ff0000'];
for (var i_tem = 0; i_tem < texts.length; i_tem++)
if(el.src.indexOf(texts[i_tem][0])>-1){
fade_up('fade1', texts[i_tem][1], texts[i_tem][2]);
break;
}
}
</script>

I think you can see what the idea is, we now are checking to see which image is displayed, and displaying the text based upon that information. You only need the image name here, the path is not required and probably shouldn't be used.

To answer your second question, the background or blend color for Textual tooltip II is set here:

<script type="text/javascript">

//Script submitted to and featured on
//http://www.dynamicdrive.com

/* 
 * FadingText(divName, numSteps, BGColor)
 * divName : Must match the DIV names defined at the end of the BODY)
 * numSteps: The number of steps in the fading transition
 * BGColor : The background colour of the DIV or document.
 */
	FadingText('fade1', 10,"000080");

/*** The "Frame Interval" Smaller = faster ***/
	FadeInterval=30;

</script>

Hex values (without the customary hash mark '#') must be used, 000080 is hex for navy.

[chas]

hi thanks for effects, if i can just sneak in here with a question

http://impressionz.ath.cx:11970/agen...ex.php?act=idx

How can i move my cocktails??? its dynamically generated with php

thanks all