Fading in - Switching Pictures on Web Page

[Mgd1138]

Hi,

I am looking to fade-in pictures vs. having them simply appear in WD6. I found some code and got it working to change the pictures on the site but a fade-in option would be ideal.

Here is a previous post with the code I used to have the pictures switch automatically.

http://www.talkgraphics.com/showthre...ht=#post401586

Any insight for the fade-in would be appreciated.

Thanks.

[handrawn]

moved to 'xara web design chat' forum

[aridzone]

You can do it with flash or you could try this script:
http://www.dynamicdrive.com/dynamici...nslideshow.htm

[Mgd1138]

Thanks Arid.

Tried copying and pasting this in (the whole thing / both sections) under the placeholder HTML. Nothing shows up. I replaced all the locations for files with my files. Nothing happened. It looks like the links (from the original, for testing purposes) did not work (old links).

/index_test_htm_files/usa2.gif (this is an example of what I was using to place all the http locations)

Any insight to get it going would be appreciated.

[Mgd1138]

Even more confused...the link naturally is for HTML code to placed in multiple spots. What I posted before, that worked for simply displaying pictures and switching them out (not fading them) was all placed in to the placeholder code for HTML. Apologize for not being that savvy.

Couple things...

- Using the code below (just as a working reference), I did NOT copy and java file to my site (Need to? who knows but it worked)
- When I copied the java file, as described in the link you provided, I then copied both sets of code in to the placeholder HTML section

Basically, it didn't work. Am I attempting to add two pieces of code (one for manual switching and one for automatic, which is what I want)??

Thanks again for your time.

<script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By Website Abstraction (www.wsabstract.com)
and Java-scripts.net (www.java-scripts.net)
*/

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>

<a href="javascript:gotoshow()"><img src="/index_test_htm_files/usa1.gif" name="slide" border=0></a>

<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("/index_test_htm_files/usa2.gif", "/index_test_htm_files/usa3.gif", "/index_test_htm_files/usa4.gif")
slideshowlinks("http://wsabstract.com", "http://dynamicdrive.com", "http://java-scripts.net")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=8000
var whichlink=0
var whichimage=0

function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage

if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>

[Mgd1138]

I have added the file I am using or attempting to modify as a reference. Here is also a link to the test page showing the code working for simply switching out the pictures.

http://www.tradevet.com/index_aussy.htm

Thanks again for your time.

[Mgd1138]

Working code...

<script language="JavaScript1.2" type="text/javascript">
var slideshow_width='600px' //SET IMAGE WIDTH
var slideshow_height='400px' //SET IMAGE HEIGHT
var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=[" /index_test_htm_files/usa1.gif", "", ""] //plain image syntax
fadeimages[1]=[" /index_test_htm_files/usa2.gif", "http://www.google.com", ""] //image with link syntax
fadeimages[2]=[" /index_test_htm_files/usa3.gif", "http://www.javascriptkit.com", "_new"] //image with link and target 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.all
var dom=document.getElementById

if (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>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else 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 : 0
var 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>' : tempcontainer
return 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"
}
else
document.images.defaultslide.src=fadeimages[curimageindex][0]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else 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=startit
else
setInterval("rotateimage()",pause)

</script>