Avatar billede realone Nybegynder
01. maj 2005 - 00:58 Der er 1 kommentar og
1 løsning

Rette layerscript til

Hej eksperter

Jeg 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.
Avatar billede skyggen2000 Nybegynder
02. maj 2005 - 15:23 #1
Hvad er det for et slideshow fra dynamickdrive du har brugt?

Hvor skriver du din tekst, altså fra hvilket element?

Det kunne tyde på du skulle sætte z-index på det element, der skal tegnes op sidst i området.

Hvor i koden står den tekst du skal skrive ud, når billedet skifter, og skal der stå tekst til hvert billede i slideshowet?

Du skriver:
1. billede fader ind -> slideshowet skifter billede til et, der næsten er transperent -> layer med tekst til siden kommer ind.

Er det til hvert billedet? Prøv at beskrive det lidt mere detaljeret.
Avatar billede realone Nybegynder
20. juli 2010 - 17:07 #2
Fandt selv løsning.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester