Fade-in slideshow - a suggestion?

[Peter_LT]

Hello Folks,

http://www.dynamicdrive.com/dynamici...nslideshow.htm

The fade-in slideshow has some remarkable possibilities
in becoming a "magical mystery tour" menu, the only
thing that's missing is the "alt" or "title" tag to say where
the link will take you when you hover the mouse over
the current image.

There are two questions related to this...
1) Can the alt / title tag be added?
2) Is it possible to split the code with a call to an external
.js script, with the picture selection placed in the HTML?
This so that a different selection of images can be parsed
from various .htm pages.

I do hope the answer is yes to both!

Regards,
Steve (Peter_LT)
Caronia II Timeline Webmaster
< http://www.caronia2.info/ >

[jscheuer1]

For #1, change the image array to this:

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target, 4) optional title attribute:
fadeimages[0]=["photo1.jpg", "", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", "", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", ""] //image with link and target syntax
fadeimages[3]=["photo4.jpg", "http://www.javascriptkit.com", "_new", "Contact Us"] //image with link,  target and title syntax

Add to the insertimage function (additions red):

function insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" title="'+fadeimages[i][3]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

For number #2, you can make an external file, call it say, fade.js. Put everything in it from the original script except:

<script language="JavaScript1.2" type="text/javascript">

from the top and:

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

from the bottom. Also. leave out this section:

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

Now, in the body of each page where the script would have gone originally, put this:

<script type="text/javascript">

/***********************************************
* Fade-in image slideshow script- © 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 full source code
***********************************************/

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target, 4) optional title attribute:
fadeimages[0]=["photo1.jpg", "", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", "", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", ""] //image with link and target syntax
fadeimages[3]=["photo4.jpg", "http://www.javascriptkit.com", "_new", "Contact Us"] //image with link,  target and title syntax
</script>

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

[Peter_LT]

Hello John,

Oh wow!!! I'm really going to enjoy playing with this
on my site! Many thanks for the very quick response,
I'll let you know how I get on. Now I've got to prepare
some suitable images...

Regards,
Steve (Peter S)
Caronia II Timeline Webmaster
< http://www.caronia2.info/ >