Søg
Avatar billede sokors Nybegynder
20. november 2005 - 08:15 Der er 20 kommentarer og
1 løsning

Hvordan laver man et slideshow?

Hej jeg er i gang med at lave min første hjemmeside i html, og i den forbindelse har jeg tænkt mig at der skal være et slideshow. Men hvordan gør jeg? jeg har selvfølgelig defineret en placering til et billede, via en tabel. placeringen er som i kan se nedenfor hvor der står - Århundredes hus700x300/aften.jpg, men hvad gør jeg derfra?

På forhånd tak!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>SØREN KORSGAARD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style sk4.css">
</head>

<body>

<table class="frame">
    <tr>
    <td class="middle"> <table class="menu">
        <tr>
          <td colspan="4" class="billedet"><img src="Århundredes hus700x300/aften.jpg" name="slideshow"></td>
        </tr>
        <tr>
          <td colspan="4" class="text2"><P>Beskrivelse af projekt eller hvad det nu måtte være.<P></td>
        </tr>
        <tr>
      </table></td>
    </tr>
</table>

</body>

</html>
Avatar billede thesurfer Nybegynder
20. november 2005 - 12:50 #1
Hvordan skal slideshowet være? Skal den automatisk skifte billede, efter x antal sekunder? Skal man manuelt klikke på "Forrige" eller "Næste" links?

/theSurfer
Avatar billede sokors Nybegynder
20. november 2005 - 14:25 #2
Det skal automatisk skifte efter ca. 5-10 sekunder. Men hvis det også er muligt at lave det så folk også selv kan klikke sig frem samtidig vil det være perfekt, men intet krav.

Sokors
Avatar billede thesurfer Nybegynder
20. november 2005 - 15:23 #3
Eksempel:

<script type="text/JavaScript">
var tid = 5; // tid i sekunder: 5
var nr = 0; // start ved 0 i arrayen
var img; // brugs til at indeholde en reference til IMG-elementet

// indsæt sti + filnavn her (i samme format):
var billeder = new Array(
"billede1.jpg",
"billede2.jpg",
"billede3.jpg"
);

// preload billederne:
for(i=0; i < billeder.length - 1; i++) {
    tmp = new Image();
    tmp.src = billeder[nr];
}

function prevnext(pn)
{
clearInterval(slideshow); // stop timeren
slide(pn); // vis billedet
slideshow = setInterval("prevnext('next')", tid * 1000); // start timere om igen
}

function slide(pn)
{
if (pn == "prev") {
  // brugeren har klikket på "Forrige"
    if (nr > 0) {
        // vi er ikke ved starten endnu = træk 1 fra
        nr--;
    }    else {
        // vi er nået start = nr sættes til nul
        nr = 0;
    }
} else {
    // enten har brugeren klikket næste, eller "automatisk"
    if (nr < billeder.length - 1) {
        // der er stadig flere billeer = læg 1 til
        nr++;
    }    else {
        // vi er nået til det sidste billede = start om
        nr = 0;
    }
}
img.src = billeder[nr]; // vis det nuværende billede
}

function setup()
{
img = document.getElementById('slideshow'); // opret reference til IMG-objektet
slideshow = setInterval("slide('next')", tid * 1000); // start timeren
}

</script>

</head>
<body onload="setup()">
<a href="#" onclick="prevnext('prev');return false;">Forrige</a> - <a href="#" onclick="prevnext('next');return false;">N&aelig;ste</a>
<br>
<img src="billede1.jpg" id="slideshow">

/theSurfer
Avatar billede sokors Nybegynder
20. november 2005 - 19:56 #4
Hej igen

Jeg har prøvet at få det til at fungere, men det virker tilsyneladende ikke. måske kan duse hvor fejlen er?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>SØREN KORSGAARD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style sk4.css">
</head>
<script type="text/javascript">
var slideShowSpeed = 5
var crossFadeDuration = 0

var Pic = new Array(
Pic[0] = 'Århundredes hus700x300/aften.jpg'
Pic[1] = 'Århundredes hus700x300/Moneyshot.jpg'
Pic[2] = 'Århundredes hus700x300/Rum diagram.jpg'
Pic[3] = 'Århundredes hus700x300/planer.jpg'
Pic[4] = 'Århundredes hus700x300/snit.jpg'
Pic[5] = 'Århundredes hus700x300/grøn trapez.jpg'
Pic[6] = 'Århundredes hus700x300/hvid trapez.jpg'
Pic[7] = 'Århundredes hus700x300/finer.jpg'
Pic[8] = 'Århundredes hus700x300/tagpap.jpg'
Pic[9] = 'Århundredes hus700x300/grønne nuancer.jpg'
Pic[10] = 'Århundredes hus700x300/singles.jpg'
);
var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = Pic[i]
}

function runSlideShow(){
  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
</head>

<body>

<table class="frame">
    <tr>
       
    <td class="middle"> <table class="menu">
          <tr>
          <td colspan="4" class="text2">2005-07-27 - ÅRHUNDREDES HUS - COMPETITION PROPOSAL - DANIEL NIELSEN - CHRISTOFFER PILGAARD</td>
        </tr>
        <tr>
          <td colspan="4" class="billedet"><img src="Århundredes hus700x300/aften.jpg" name="slideshow" class="billedet" alt=""></td>
        </tr>
        <tr>
          <td colspan="4" class="text2"><P>Beskrivelse af projekt eller hvad det nu måtte være.<P></td>
        </tr>
        <tr>
          <td width="175" height="184" class="text2">
              <a href="home sk.htm" class="active">HOME</a><br>
            <a href="aboute me sk.htm" class="menu">ABOUTE ME</a><br>
            <a href="projects sk.htm" class="menu">PROJECTS</a><br>
            <a href="pictures sk" class="menu" target="_blank">PICTURES</a><br>
            <a href="downloads sk.htm" class="menu">DOWNLOADS</a><br>
            <a href="contact sk.htm" class="menu">CONTACT</a><br>
            <a href="links sk.htm" class="menu">LINKS</a><br></td>
          <td width="175" class="text2">
              <a href="sustainability sk.htm" class="menu">SUSTAINABILITY</a><br>
              <a href="housing sk.htm" class="menu">HOUSING</a><br>
            <a href="public buildings sk.htm" class="menu">PUBLIC BUILDINGS</a><br>
            <a href="office sk.htm" class="menu">OFFICE</a><br>
            <a href="city planning sk" class="menu" target="_blank">CITY PLANNING</a><br>
            <a href="analysis sk.htm" class="menu">ANALYSIS</a><br>
            <a href="design sk.htm" class="menu">DESIGN</a><br>
            <a href="publications sk.htm" class="menu">PUBLICATIONS</a><br></td>
          <td width="175" class="text2"> <a href="Standard house sk.htm" class="menu">STANDART HOUSE</a><br>
            <a href="about me sk.htm" class="menu">YOUTH RESIDENCE</a><br>
            <a href="projects sk.htm" class="menu">COMMUNE HOUSING</a><br>
            <a href="pictures sk" class="menu" target="_blank">CHATLETS-AMAGER</a><br>
            <a href="downloads sk.htm" class="menu">WEEKEND COTTAGE</a><br>
            <a href="links sk.htm" class="menu">ALLOTMENT HOUSE</a><br></td>
          <td width="175" class="text2"><a href="downloads sk.htm" class="menu">REGISTRATION</a><br>           
            <a href="downloads sk.htm" class="menu">SKETCHES</a><br>
            <a href="downloads sk.htm" class="menu">DESCRIPTION</a><br>
            <a href="downloads sk.htm" class="menu">DOWNLOAD PDF</a><br>
        </tr>
        <tr>
          <td colspan="4" class="text2"><font color="#CCCCCC">&copy 1999-2005 SØREN KORSGAARD. ALL RIGHTS RESERVED.</font></td>
        </tr>
      </table></td>
    </tr>
</table>

</body>

</html>
Avatar billede thesurfer Nybegynder
21. november 2005 - 14:17 #5
Du bruger "new Array()" forkert.. det skal se sådan ud:

var Pic = new Array();

Og så skal du slette ");" som tilhørte din gamle kode.

Gode tråd:
- sæt altid ";" efter hver afsluttet linie.. eksempel: var slideShowSpeed = 5;
- brug så vidt muligt, kun små bogstaver i stier+filnavne
- brug aldrig " " (mellemrum) eller "æ,ø,å" (og andre special tegn) i stier og filnavne. Derfor:

aarhundredes_hus700x300/moneyshot.jpg


Se om det virker nu..

/theSurfer
Avatar billede sokors Nybegynder
24. november 2005 - 17:55 #6
Hej jeg har rettet i koden og prøvet igen og men det vil ikke virke, kan du se hvad jeg gør forkert?

Iøvrigt skriver iexplorer at den har blokeret aktivt indhold når jeg prøver at få den vist der, men selv om at jeg ja til at få det vist, er det kun det første billede der kommer frem.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>SØREN KORSGAARD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style sk4.css">

<script type="text/javascript">
var slideShowSpeed = 5;
var crossFadeDuration = 3;

var Pic = new Array()

Pic[0] = 'aarhundredeshus700x300/aften.jpg'
Pic[1] = 'aarhundredeshus700x300/moneyshot.jpg'

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = Pic[i]
}

function runSlideShow(){
  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

</head>

<body onload="runSlideShow()">

<table>
    <tr>
       
    <td id=VU"><img src="aarhundredeshus700x300/aften.jpg" name="slideshow" alt=""></td>
    </tr>
</table>

</body>

</html>
Avatar billede roenving Novice
25. november 2005 - 15:33 #7
IE er som default sat til, at den ikke må eksekvere f.eks. javascript, der kommer fra den lokale harddisk, så det er sikkert derfor !-)

Det kan du ændre ved at hakke af udfor Funktioner --> Internetindstillinger ... --> Avanceret --> Tillad aktivt indhold at køre i filer på Denne computer (næsten nederst !o]
Avatar billede thesurfer Nybegynder
25. november 2005 - 21:50 #8
sokors>
- Hvad var der galt med 20/11-2005 15:23:03? Er det fordi der ikke er en speciel effekt, når billedet skiftes?


- Ved du overhovedet hvad du laver, eller bruger du bare noget kode, du ikke forstår?
Jeg tænker bl.a. på:

  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }


- Sæt ";" efter hver eneste afsluttet linie.. hvis du ikke gør det, kan det give problemer.


- Et godt råd: Når du laver hjemmesider, skal du ikke bruge Internet Explorer. Brug en anden browser, der bedre følger W3C standarden. F.eks. Mozilla FireFox ( http://www.mozilla.org/products/firefox/ ) eller Opera ( http://www.opera.com/download ).
Generelt skal du ikke bruge Internet Explorer, da det en skod browser, med alt for mange sikkerhedsfejl, og mangler.

/theSurfer
Avatar billede sokors Nybegynder
27. november 2005 - 19:22 #9
Du har fuldstændig ret - jeg aner ikke hvad jeg laver :) - men jeg prøver - og nu virker det! i skal allesammen have tusind tak for hjælpen.

Jeg prøver Firefox og ser hvad det resultere i.
Avatar billede thesurfer Nybegynder
27. november 2005 - 22:50 #10
Det var ikke for at nedgøre dig, eller noget.. jeg ville bare vide, hvilket niveau du er på..

Det nytter ikke noget, at jeg går ud fra, at det er noget du kender, hvis du ikke kender det..

Husk lige at markere navnet i boksen til venstre, og derefter klikke på Accepter-knappen.

/theSurfer
Avatar billede thesurfer Nybegynder
10. december 2005 - 01:31 #11
sokors> Wa' så, mester..? Hvor langt er du kommet? :-)

/theSurfer
Avatar billede sokors Nybegynder
25. december 2005 - 00:36 #12
Hey jeg har ikke set at du har skrevet, men jeg er lige så stille begyndt at få siden på plads. Der er stadig en del døde links, men jeg synes at det bliver cool. Tag et kig på: www.sorenkorsgaard.com
Avatar billede thesurfer Nybegynder
25. december 2005 - 13:48 #13
Hmm.. Opera melder fejl ved ".filters.blendTrans.Apply()"..

Fejlmeddelelsen er:

SØREN KORSGAARD
http://www.sorenkorsgaard.com/norway05.htm
Event thread: load
Error:
name: TypeError
message: Statement on line 43: Could not convert undefined or null to object
Backtrace:
  Line 43 of inline#1 script in http://www.sorenkorsgaard.com/norway05.htm
    document.images.SlideShow.filters.blendTrans.Apply();
  Line 1 of  script
    runSlideShow();
  At unknown location
    [statement source code not available]

Jeg kan ikke lige se hvorfor..
Men fejlen gør, at slideshowet ikke virker i Opera..

/theSurfer
Avatar billede roenving Novice
25. december 2005 - 13:53 #14
document.all understøttes jo også af Opera, som dog ikke understøtter transitions (såvidt jeg ved !-)

-- så løsningen er vel at sørge for, at Opera går udenom:

var ie = document.all && navigator.userAgent.toLowerCase().indexOf("opera") < 0;

-- og så i stedet for at teste med document.all, så teste på ie:

  if (ie){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"

...
Avatar billede thesurfer Nybegynder
25. december 2005 - 13:58 #15
roenving> Nice løsning :-)

/theSurfer
Avatar billede roenving Novice
25. december 2005 - 14:09 #16
Tjah, hrm, løsning kan man vel næppe kalde det, snarere et hack !o]
Avatar billede sokors Nybegynder
25. december 2005 - 21:33 #17
Jeg er jo grøn hvad angår html, så hvis jeg skal ha'min side til at virke i Opera, hvor skal jeg da indsætte neden stående i mit dokument?

var ie = document.all && navigator.userAgent.toLowerCase().indexOf("opera") < 0;

og er der mere der skal med?
Avatar billede thesurfer Nybegynder
25. december 2005 - 21:34 #18
Indsæt denne linie lige under linien "var crossFadeDuration = 3;":

var ie = document.all && navigator.userAgent.toLowerCase().indexOf("opera") < 0;

I stedet for:

  if (document.all){

bruger du:

if (ie){

/theSurfer
Avatar billede thesurfer Nybegynder
25. december 2005 - 21:40 #19
..og det er ikke HTML, men JavaScript.. :-)

/theSurfer
Avatar billede sokors Nybegynder
27. december 2005 - 13:01 #20
Betyder det at jeg efter stierne til billederne skal slette:

function runSlideShow(){
  if (document.all){
      document.images.SlideShow.style.filter="blendTrans(duration=2)"
      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
      document.images.SlideShow.filters.blendTrans.Apply()     
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
      document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)

eller er det kun:

  if (document.all){
Avatar billede roenving Novice
27. december 2005 - 13:20 #21
Nej, du skal kun ændre de linjer, hvor der står sådan !-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »