Avatar billede haabert Nybegynder
19. juni 2008 - 12:12 Der er 57 kommentarer

simpelt kontinuerligt kørende slideshow

Hej eksperter,

Jeg skal lave et simpelt slideshow, som det her: www.aarch.dk
Det skal kunne vise nogle af mine projekter og gerne fungere som link til de pågældende sider om projekterne.

Jeg har prøvet med flash men er gået væk fra det igen.

Det jeg har brug for af jer, er hjælp med et javascript. I må gerne, når I svarer, komme med løsningen inkl. <body> og <head> tags'ene, så jeg kan se hvad der er hvad og hvor det skal sættes ind i mit dokument.

Jeg har kigget på http://www.eksperten.dk/spm/672906, men kan ikke rigtig få det til at virke.

Frem med pædagogikken, jeg er ikke så god til det med scripts :-)

Mvh Mads
Avatar billede w13 Novice
19. juni 2008 - 12:16 #1
At lave et slideshow som det, du linker til, i JavaScript vil kræve meget kode og blive meget kompliceret.
Avatar billede haabert Nybegynder
19. juni 2008 - 12:25 #2
Ok, så jeg fornemmer jeg må tilbage til flash?

Altså det behøver i princippet blot være 1-5 billeder som glider ind fra siden. Kan du give mig en kode til det?? Det på www.aarch.dk er vist lidt mere avanceret med en undertekst som kommer op også, men det behøver mit ikke.
Avatar billede w13 Novice
19. juni 2008 - 12:29 #3
Nej, jeg har desværre ikke koden til det. Hverken i JavaScript eller Flash. Men det kan jo være, nogen andre ligger inde med det.
Avatar billede haabert Nybegynder
19. juni 2008 - 12:32 #4
ok, tak for hjælpen, jeg afventer og ser om der er nogle andre, der kan hjælpe.
Avatar billede klaudi Ekspert
20. juni 2008 - 18:12 #5
Hej

Her er lidt at "lege" med:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<!-- Minus AutoDato -->
    <TITLE>Slide rul</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY>

<script type="text/javascript">

/***********************************************
* Conveyor belt 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
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.minside.dk"><img src="image01.jpg" alt=1 border=1></a>'
leftrightslide[1]='<a href="http://www.minside.dk"><img src="image02.jpg" alt=2 border=1></a>'
leftrightslide[2]='<a href="http://www.minside.dk"><img src="image03.jpg" alt=3 border=1></a>'
leftrightslide[3]='<a href="http://www.minside.dk"><img src="image04.jpg" alt=4 border=1></a>'
leftrightslide[4]='<a href="http://www.minside.dk" target="_blank"><img src="image05.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
<BR><BR>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

</BODY>
</HTML>

mvh klaudi
Avatar billede w13 Novice
20. juni 2008 - 19:01 #6
Nu har jeg lige hjemmestrikket dette her. Det kan måske bruges:
***************************************************************
<html>
<head>
<body>

<div id="slideshow" style="position:relative"><img id="imgback" style="position:absolute" ><div id="divfront" style="position:absolute;width:0;overflow:hidden;text-align:right"><img id="imgfront" style="position:absolute;right:0"></div>

<script type="text/javascript">
var aPics=["1.bmp","2.bmp"];
var oImgBack=document.getElementById("imgback");
var oImgFront=document.getElementById("imgfront");
var oDivFront=document.getElementById("divfront");
oImgBack.setAttribute("src",aPics[0]);

function changePic(i){
    oDivFront.style.height=oImgBack.offsetHeight+"px";
    iSlideshow++;
    if(iSlideshow==aPics.length)iSlideshow=0;
    oImgFront.setAttribute("src",aPics[iSlideshow]);
    slidePic(0,oImgFront.offsetWidth);
}
function slidePic(i,iTop){
    iSpeed=5;
    if(i>iTop*0.9)i+=4;
    else if(i>iTop*0.75)i+=5;
    else if(i>iTop*0.5)i+=7;
    else i+=10;
    oDivFront.style.width=i+"px";
    if(oDivFront.offsetWidth<iTop){
        window.setTimeout("slidePic("+(i+","+iTop)+")",30);
    }else{
        oImgBack.setAttribute("src",aPics[iSlideshow]);
        oDivFront.style.width=0;
    }
}
var iSlideshow=0;
var tSlideshow=window.setInterval("changePic(iSlideshow)",3000);
</script>
********************************************
Så skal billederne bare stå her:
var aPics=["1.bmp","2.bmp"];
Avatar billede klaudi Ekspert
21. juni 2008 - 11:49 #7
Avatar billede olebole Juniormester
21. juni 2008 - 14:24 #8
<ole>

klaudi2k8 >> Med al respekt, så er w13's kode i en helt anden klasse end den fra Dynamic Drive - som efterhånden er _ret_ gammel  ;o)

/mvh
</bole>
Avatar billede klaudi Ekspert
21. juni 2008 - 15:04 #9
Ok, pyt med hva klasse det er, bare det virker :-)

haabert efterlyser et scripts med link,

"Det skal kunne vise nogle af mine projekter og gerne fungere som link til de pågældende sider om projekterne."

det kan jeg ik lige finde i w13's

mvh klaudi
Avatar billede olebole Juniormester
21. juni 2008 - 15:24 #10
Det virker også at køre i venstre side på Holbækmotorvejen ... bare ikke så længe ad gangen.

Scriptet bygger på kode fra før årtusindskiftet og giver ingen mening under de nyeste standarder - men tager til gengæld højde for browsere, der udgik for snart 10 år siden! Desuden kan man vel ikke sige, koden virker, når den disabler de vigtigste dele af CSS i IE6 - som trods alt stadig er i flittig brug  ;o)

Detaljen med links skriver w13 sikkert gerne ind i sin version  =)
Avatar billede klaudi Ekspert
21. juni 2008 - 15:40 #11
Fino, jeg venter

mvh klaudi
Avatar billede w13 Novice
21. juni 2008 - 17:54 #12
Her er med links:
*****************************
<html>
<head>
<body>

<div id="slideshow" style="position:relative">
    <a><img id="imgback" style="position:absolute;border:0"></a>
    <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
</div>

<script type="text/javascript">
var iSlideshowDelay=5000;
var aPics=["1.bmp","2.bmp"];
var aLinks=["http://www.google.dk","http://www.jubii.dk"];
var oImgBack=document.getElementById("imgback");
var oImgFront=document.getElementById("imgfront");
var oDivFront=document.getElementById("divfront");
var iSlideshow=0;
var tSlideshow=window.setInterval("changePic(iSlideshow)",iSlideshowDelay);
oImgBack.setAttribute("src",aPics[0]);
oImgBack.parentNode.setAttribute("href",aLinks[0]);

function changePic(i){
    oDivFront.style.height=oImgBack.offsetHeight+"px";
    if(++iSlideshow==aPics.length)iSlideshow=0;
    oImgFront.setAttribute("src",aPics[iSlideshow]);
    oImgFront.parentNode.setAttribute("href",aLinks[iSlideshow]);
    slidePic(0,oImgFront.offsetWidth);
}
function slidePic(i,iTop){
    iSpeed=5;
    if(i>iTop*0.95)i+=2;
    else if(i>iTop*0.9)i+=3;
    else if(i>iTop*0.8)i+=5;
    else if(i>iTop*0.65)i+=7;
    else if(i>iTop*0.5)i+=8;
    else i+=10;
    oDivFront.style.width=i+"px";
    if(oDivFront.offsetWidth<iTop){
        window.setTimeout("slidePic("+(i+","+iTop)+")",30);
    }else{
        oImgBack.setAttribute("src",aPics[iSlideshow]);
        oImgBack.parentNode.setAttribute("href",aLinks[iSlideshow]);
        oDivFront.style.width=0;
    }
}
</script>
*********************************
Jeg har dog nok snart en lidt kortere version klar.
Avatar billede klaudi Ekspert
21. juni 2008 - 19:34 #13
Damn nice
Avatar billede haabert Nybegynder
21. juni 2008 - 23:39 #14
Hej,

Her har man været væk 1 dag og så skal jeg da love for der er sket noget :-)
Der er nogle forskellige idéer til en kode, hva for en af dem skal jeg vælge? Jeg har ikke forstand på om de disabler CSS osv. Er den sidste =korteste den bedste?

Jeg kan se der mangler en </head>, hvor skal den ind henne?
Avatar billede mclemens Nybegynder
21. juni 2008 - 23:49 #15
w13's med </head> og en doctype m.v.
(og ja, w13's er klart den bedste)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>

<div id="slideshow" style="position:relative">
    <a><img id="imgback" style="position:absolute;border:0"></a>
    <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
</div>

<script type="text/javascript">
var iSlideshowDelay=5000;
var aPics=["1.bmp","2.bmp"];
var aLinks=["http://www.google.dk","http://www.jubii.dk"];
var oImgBack=document.getElementById("imgback");
var oImgFront=document.getElementById("imgfront");
var oDivFront=document.getElementById("divfront");
var iSlideshow=0;
var tSlideshow=window.setInterval("changePic(iSlideshow)",iSlideshowDelay);
oImgBack.setAttribute("src",aPics[0]);
oImgBack.parentNode.setAttribute("href",aLinks[0]);

function changePic(i){
    oDivFront.style.height=oImgBack.offsetHeight+"px";
    if(++iSlideshow==aPics.length)iSlideshow=0;
    oImgFront.setAttribute("src",aPics[iSlideshow]);
    oImgFront.parentNode.setAttribute("href",aLinks[iSlideshow]);
    slidePic(0,oImgFront.offsetWidth);
}
function slidePic(i,iTop){
    iSpeed=5;
    if(i>iTop*0.95)i+=2;
    else if(i>iTop*0.9)i+=3;
    else if(i>iTop*0.8)i+=5;
    else if(i>iTop*0.65)i+=7;
    else if(i>iTop*0.5)i+=8;
    else i+=10;
    oDivFront.style.width=i+"px";
    if(oDivFront.offsetWidth<iTop){
        window.setTimeout("slidePic("+(i+","+iTop)+")",30);
    }else{
        oImgBack.setAttribute("src",aPics[iSlideshow]);
        oImgBack.parentNode.setAttribute("href",aLinks[iSlideshow]);
        oDivFront.style.width=0;
    }
}
</script>

</body></html>
Avatar billede haabert Nybegynder
22. juni 2008 - 00:03 #16
det er genialt det der!

har selv fundet ud af at sætte </head> ind... det var ikke så svært :-)

nå jamen så har jeg lige et spørgsmål mere. Linket skal helst have et target, så når man klikker på et af billederne, så åbnes siden i en af de andre frames jeg har. Hvor kan jeg skrive det ind i koden?

I kan tjekke siden ud på www.marchwerk.com
Avatar billede mclemens Nybegynder
22. juni 2008 - 00:11 #17
<div id="slideshow" style="position:relative">
    <a><img id="imgback" style="position:absolute;border:0" src="1.bmp" alt="" target="framename"></a>
    <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0" src="2.bmp" alt="" target="framename"></a></div>
</div>

(husk alt og src på billederne fra start af)
Avatar billede w13 Novice
22. juni 2008 - 00:30 #18
Jeg burde have sat en doctype på, ja, men </head>, </body> og </html> er bevidst udeladt, da de ikke kræves. =)

Hvis du vil have target på, retter du bare de to <a>-tags, f.eks.:

<div id="slideshow" style="position:relative">
    <a target="FRAMENAVN"><img id="imgback" style="position:absolute;border:0"></a>
    <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a target="FRAMENAVN"><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
</div>

Så skal du bare erstatte FRAMENAVN de 2 steder med targets navn.
Avatar billede w13 Novice
22. juni 2008 - 00:31 #19
I mclemens' kode mangler alt-tagsene vist et lukke-anførselstegn. Dvs. alt="" i stedet for alt=". Det vil disable target="framename" nemlig. =)
Avatar billede mclemens Nybegynder
22. juni 2008 - 00:35 #20
"Jeg burde have sat en doctype på, ja, men </head>, </body> og </html> er
bevidst udeladt, da de ikke kræves. =)" - Kan du evt. uddybe det med et link ?

... Umiddelbart mener jeg at både html body og head er
elementer som skal lukkes - men jeg kan da tage fejl ?
Avatar billede mclemens Nybegynder
22. juni 2008 - 00:36 #21
- Hmm, ja det gik ski lidt hurtig med de alt tags. =D
Avatar billede haabert Nybegynder
22. juni 2008 - 00:55 #22
hmm, nu er jeg jo ikke den store haj, når kommer til at arbejde med javascripts og html, men normalt plejer en html-fil da at indeholde både <..> og </..> for hhv. body, html og head.
Avatar billede w13 Novice
22. juni 2008 - 01:12 #23
Avatar billede w13 Novice
22. juni 2008 - 01:16 #24
Avatar billede w13 Novice
22. juni 2008 - 01:21 #25
Ja, jeg lukker også altid html, head og body, når jeg laver sider, men når jeg tester hylder jeg dovenskaben og lader dem stå åbne - fordi jeg kan. =)
Avatar billede thesurfer Nybegynder
22. juni 2008 - 02:15 #26
Variablen "iSpeed" bliver sat til "5", hver gang funktionen "slidePic" bliver afviklet, men variablen "iSpeed" bliver aldrig brugt (dvs., aflæst).. Det er sikkert noget gammelt kode..
Avatar billede thesurfer Nybegynder
22. juni 2008 - 02:16 #27
Klokken har passeret mange, og slåfejl er gratis.. happy hour.. :-)
Avatar billede w13 Novice
22. juni 2008 - 10:02 #28
Godt spottet. =) Linjen:
    iSpeed=5;
skal slettes.
Avatar billede mclemens Nybegynder
22. juni 2008 - 13:11 #29
w13 - tak for link. Jeg havde egentlig altid troet, det var krævet
,da w3's validator brokkede sig, hvis man glemte et lukke tag :)

(P.s.: Når jeg tester bruger jeg som regel en standard.txt fil,
som jeg lige kopierer som en html fil, den indeholder en basis
html side med style og script blokke - længe leve dovenskaben)
Avatar billede haabert Nybegynder
23. juni 2008 - 22:38 #30
altså jeg er stået af nu. Jeg bad jo bare om en kode til et slide-show :-)

Men jeg har prøvet at sætte ind scriptet ind i min html-kode. Det fungerer 90 % perfekt. Jeg synes ikke rigtig jeg kan styre selve scriptet, når jeg sætter det ind i fx en tabel. Hvad er det der gør, at det bliver placeret i bunden af en tabel?

Jeg har også prøvet at højrejustere hele scriptet, så det kommer til at stå i højre side af skærmen, når man viser det. Men det kan jeg ikke rigtigt få til at virke.

I kan se min kode på www.marchwerk.com/forside_slide.htm
Avatar billede thesurfer Nybegynder
23. juni 2008 - 22:48 #31
Hvis slideshowet skal vises i toppen, indsætter følgende i cellen der indeholder slideshowet:

valign="top"

Altså:

<table width="600" height="600" border="1" cellspacing="0" cellpadding="0">
<tr>
    <td valign="top">

<div id="slideshow" style="position:relative">
    <a target="indhold"><img id="imgback" style="position:absolute;border:0"></a>
    <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
</div>

osv...
Avatar billede thesurfer Nybegynder
23. juni 2008 - 22:53 #32
Hvis du vil teste det, inden du laver ændringen, kan du smide dette linie JavaScript i adressefeltet, når du står på siden "forside_slide.htm":

java script: td = document.getElementsByTagName("td")[0]; td.style.verticalAlign="top"; void(0)
Avatar billede thesurfer Nybegynder
23. juni 2008 - 22:54 #33
PS: Slideshowet virker ikke optimalt i Mozilla Firefox 2.0.0.14..
Avatar billede haabert Nybegynder
23. juni 2008 - 22:57 #34
hmm, underligt, at det virker, for når jeg siger align="right" ser det sådan her ud:

www.marchwerk.com/forside_slide.htm
Avatar billede thesurfer Nybegynder
23. juni 2008 - 22:58 #35
Hvad er det lige der virker..? Du har smidt slideshowet uden for tabellen..?

Hvad med valign="top" ?
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:08 #36
Smid lige denne linie som den første linie i "forside_slide.htm":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede haabert Nybegynder
23. juni 2008 - 23:10 #37
Hvis du tjekker koden ligger hele slideshowet INDE i tabellen.. Men den vises uden for... Det virker mystisk.
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:10 #38
og så har du et "</script>" der bare flyder.. den linie må du gerne fjerne.. :-)
Avatar billede haabert Nybegynder
23. juni 2008 - 23:11 #39
Hmm, det gav ikke rigtigt noget?
Avatar billede haabert Nybegynder
23. juni 2008 - 23:12 #40
godt set ;-)
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:15 #41
Må jeg lige se resultatet af denne kode..?:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>forside_slide</title>
<meta name="Generator" content="Stone's WebWriter 4">
<script type="text/javascript">
var iSlideshowDelay=5000;
var aPics=["frontshow/1.jpg","frontshow/2.jpg","frontshow/3.jpg","frontshow/4.jpg"];
var aLinks=["beskrivelse_scout hut.htm","beskrivelse_livingroom.htm","beskrivelse_gellerup.htm","beskrivelse_hudiksvall.htm"];
var oImgBack, oImgFront, oDivFront, iSlideshow, tSlideshow;

window.onload = function()
{
    oImgBack=document.getElementById("imgback");
    oImgFront=document.getElementById("imgfront");
    oDivFront=document.getElementById("divfront");
    iSlideshow=0;
    tSlideshow=window.setInterval("changePic(iSlideshow)",iSlideshowDelay);
    oImgBack.setAttribute("src",aPics[0]);
    oImgBack.parentNode.setAttribute("href",aLinks[0]);
}

function changePic(i)
{
    oDivFront.style.height=oImgBack.offsetHeight+"px";
    if(++iSlideshow==aPics.length)iSlideshow=0;
    oImgFront.setAttribute("src",aPics[iSlideshow]);
    oImgFront.parentNode.setAttribute("href",aLinks[iSlideshow]);
    slidePic(0,oImgFront.offsetWidth);
}

function slidePic(i,iTop)
{
    if(i>iTop*0.95)i+=2;
    else if(i>iTop*0.9)i+=3;
    else if(i>iTop*0.8)i+=5;
    else if(i>iTop*0.65)i+=7;
    else if(i>iTop*0.5)i+=8;
    else i+=10;
    oDivFront.style.width=i+"px";
    if(oDivFront.offsetWidth<iTop)
    {
        window.setTimeout("slidePic("+(i+","+iTop)+")",30);
    }else{
        oImgBack.setAttribute("src",aPics[iSlideshow]);
        oImgBack.parentNode.setAttribute("href",aLinks[iSlideshow]);
        oDivFront.style.width=0;
    }
}
</script>
</head>
<body>
Som I kan se går scriptet ud over rammen...
<table width="600" height="600" border="1" cellspacing="0" cellpadding="0">
<tr>
    <td valign="top" align="right">
        <div id="slideshow" style="position:relative">
            <a target="indhold"><img id="imgback" style="position:absolute;border:0"></a>
            <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
        </div>
    </td>
</tr>
</table>
</body>
</html>
Avatar billede haabert Nybegynder
23. juni 2008 - 23:20 #42
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:22 #43
Samme kode, lidt bedre sat op..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>forside_slide</title>
<meta name="Generator" content="Stone's WebWriter 4">
<script type="text/javascript">
var iSlideshowDelay = 5000;
var aPics = ["frontshow/1.jpg", "frontshow/2.jpg", "frontshow/3.jpg", "frontshow/4.jpg"];
var aLinks = ["beskrivelse_scout hut.htm", "beskrivelse_livingroom.htm", "beskrivelse_gellerup.htm", "beskrivelse_hudiksvall.htm"];
var oImgBack, oImgFront, oDivFront, iSlideshow, tSlideshow;

window.onload = function()
{
    oImgBack = document.getElementById("imgback");
    oImgFront = document.getElementById("imgfront");
    oDivFront = document.getElementById("divfront");
    iSlideshow = 0;
    tSlideshow = window.setInterval("changePic(iSlideshow)", iSlideshowDelay);
    oImgBack.setAttribute("src", aPics[0]);
    oImgBack.parentNode.setAttribute("href", aLinks[0]);
}

function changePic(i)
{
    oDivFront.style.height = oImgBack.offsetHeight+"px";
    if (++iSlideshow == aPics.length) iSlideshow = 0;
    oImgFront.setAttribute("src", aPics[iSlideshow]);
    oImgFront.parentNode.setAttribute("href", aLinks[iSlideshow]);
    slidePic(0, oImgFront.offsetWidth);
}

function slidePic(i, iTop)
{
    if (i > iTop * 0.95) i += 2;
    else if (i>iTop*0.9) i += 3;
    else if (i>iTop*0.8) i += 5;
    else if (i>iTop*0.65) i += 7;
    else if (i>iTop*0.5) i += 8;
    else i += 10;
    oDivFront.style.width= i + "px";
    if(oDivFront.offsetWidth < iTop)
    {
        window.setTimeout("slidePic(" + (i + "," + iTop) + ")",30);
    }else{
        oImgBack.setAttribute("src", aPics[iSlideshow]);
        oImgBack.parentNode.setAttribute("href", aLinks[iSlideshow]);
        oDivFront.style.width = 0;
    }
}
</script>
</head>
<body>
Som I kan se går scriptet ud over rammen...
<table width="600" height="600" border="1" cellspacing="0" cellpadding="0">
<tr>
    <td valign="top" align="right">
        <div id="slideshow" style="position:relative">
            <a target="indhold"><img id="imgback" style="position:absolute;border:0"></a>
            <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
        </div>
    </td>
</tr>
</table>
</body>
</html>
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:24 #44
Jeg har lagt mærke til, at en af dine filer hedder "beskrivelse_scout hut.htm".. med mellemrum..

Undgå altid specialtegn, som mellemrum, æ, ø, å osv..

Brug kun a til z, 0 til 9, - og _ i filnavne..
Avatar billede haabert Nybegynder
23. juni 2008 - 23:25 #45
tjek..
Avatar billede thesurfer Nybegynder
23. juni 2008 - 23:26 #46
Prøv lige med denne celle:

    <td valign="top" align="right">
        <div style="width:600px; height:600px; margin:0; padding:0; text-align:right;">
            <div id="slideshow" style="position:relative">
                <a target="indhold"><img id="imgback" style="position:absolute;border:0"></a>
                <div id="divfront" style="position:absolute;width:0;overflow:hidden"><a><img id="imgfront" style="position:absolute;right:0;border:0"></a></div>
            </div>
        </div>
    </td>

Jeg kan ikke helt huske om "text-align" påvirker divs.. hvis ikke, erstat "text-align" med "float"..
Avatar billede haabert Nybegynder
23. juni 2008 - 23:29 #47
ok, det er rettet
Avatar billede haabert Nybegynder
23. juni 2008 - 23:35 #48
hmm, der sker ikke rigtigt noget

Jeg prøvede også at slette align="right" fra <td>, da det vel er dobbeltkonfekt at have den sammen med text-align i <div>, men det gør ingen forskel.
Avatar billede haabert Nybegynder
23. juni 2008 - 23:42 #49
jeg prøver at få det til at funke.. Men 1000 tak for hjælpen anyways!!
Avatar billede mclemens Nybegynder
23. juni 2008 - 23:55 #50
<div style="margin: 0pt; padding: 0pt; width: 600px; height: 600px; text-align: right;">
^ - text-align:right ???
Avatar billede mclemens Nybegynder
24. juni 2008 - 00:19 #51
Lod lige mærke til et lille problem ved load af billede nr 2...
ret
    oDivFront.style.height = oImgBack.offsetHeight+"px";
til
    oDivFront.style.height = Math.max(oImgBack.offsetHeight,oImgFront.offsetHeight)+"px";



og sæt en src på denne
<img id="imgfront" style="position:absolute;right:0;border:0">
->
<img id="imgfront" style="position:absolute;right:0;border:0" src="frontshow/2.jpg">



... der bør også sættes en start src på denne:
<img id="imgback" style="position:absolute;border:0">
->
<img src="frontshow/1.jpg" id="imgback" style="position:absolute;border:0">


(husk at slette den text-align som nævnt i ovenstående kommentar)
Avatar billede haabert Nybegynder
24. juni 2008 - 21:14 #52
hey mclemens,

jeg har prøvet at ændre de ting, du nævner. Men hvis du ser www.marchwerk.com/forside_slide_thesurfer1.htm ser det ud til at problemet kommer igen, når slideshowet "har kørt en omgang".

Hvis jeg fjerner den text-align, hopper slideshowet tilbage til tabellen, hvor den så står som venstrejusteret. Har du en idé til hvordan jeg kan højrejustere slideshowet - uden det hopper ud af tabellen - hvilket er meget mystisk at den gør...
Avatar billede mclemens Nybegynder
24. juni 2008 - 21:19 #53
1)Hmm, ja jeg var vist for utålmodig til at vente de 20 sekunder, beklager =D
Rettede lige rundt på rækkefølgen her er en rettet udgave af changePic:

function changePic(i)
{
    if (++iSlideshow == aPics.length) iSlideshow = 0;
    oImgFront.setAttribute("src", aPics[iSlideshow]);
    oImgFront.parentNode.setAttribute("href", aLinks[iSlideshow]);
    oDivFront.style.height = Math.max(oImgBack.offsetHeight,oImgFront.offsetHeight)+"px";
    slidePic(0, oImgFront.offsetWidth);
}

Kigger lige på 2)
Avatar billede mclemens Nybegynder
24. juni 2008 - 21:22 #54
2) Hvad med denne:
        <div style="margin: 0pt; padding: 0pt; width: 500px; height: 600px;float:right;">
Avatar billede mclemens Nybegynder
24. juni 2008 - 21:23 #55
Hmm, slet lige det margin: 0pt; padding: 0pt;,
jeg tror det var noget FF lavede da jeg gemte filen.
Avatar billede haabert Nybegynder
24. juni 2008 - 21:51 #56
Yes mand, sådan så er den sgu højrejusteret og jeg har kontrollen igen!! :-)

99 % færdig, fordi som du kan se på www.marchwerk.com/forside_slide_thesurfer1.htm er der stadig lidt problemer med 2.jpg når slideshowet kører 2. omgang.

har efterhånden lidt dårlig samvittighed over alt det hjælp jeg får, men min overblk over javascripts kan ligge et lille sted :-)
Avatar billede mclemens Nybegynder
24. juni 2008 - 23:28 #57
Jeg kan ikke lige se fejlen når slideshowet kører 2. omgang.
- Jeg kunne se en fejl før og foreslog derfor 24/06-2008 21:19:44.
... Kan du uddybe/screenshotte hvad der er fejlen ved andet gennemløb ?
www.marchwerk.com/forside_slide_thesurfer1.htm virker umiddelbart fint her ...
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