Rette layerscript til
Hej eksperterJeg er igang med et eksamensprojekt, og i den forbindelse har jeg benyttet mig af nedenstående slideshow-script.
Scriptet har jeg benyttet på forsiden, hvor jeg har et slideshow af billeder fra den butik, vi laver hjemmesiden for.
Dog kunne jeg godt tænke mig samme effekt på andre sider - idéen er, at et billede fader frem på skærmen, fader ud til et andet billede der er meget mere transperent (behøver ikke script der, laver de to billeder i photoshop), og så stopper slideshowet - derefter kommer der et transperent layer frem med tekst.
Jeg har selv prøvet mig frem, men den tekst, jeg skriver, fader ud når det første billede i slideshowet fader ud.
Håber, at min beskrivelse er forståelig - altså følgende:
1. billede fader ind -> slideshowet skifter billede til et, der næsten er transperent -> layer med tekst til siden kommer ind.
Scriptet, jeg har brugt, er som følger:
<script language="JavaScript1.2">
//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var slideshow_width=160 //SET IMAGE WIDTH
var slideshow_height=170 //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/slide/front1.jpg"
fadeimages[1]="images/slide/front2.jpg"
fadeimages[2]="images/slide/front3.jpg"
fadeimages[3]="images/slide/front4.jpg"
fadeimages[4]="images/slide/front5.jpg"
fadeimages[5]="images/slide/front6.jpg"
fadeimages[6]="images/slide/front7.jpg"
fadeimages[7]="images/slide/front8.jpg"
////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]
}
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
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"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[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/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
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/100
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
-------------------------------
Dette er en hasteopgave, opgaven skal afleveres tirsdag - derfor er der mange point på højkant!
På forhånd mange tak.
