Avatar billede henne Nybegynder
23. august 2002 - 17:32 Der er 19 kommentarer og
1 løsning

Skift billeder på "næste" og "forrige"

Hej,
Jeg sidder og arbejder på en hjemmeside i Dreamweaver MX.
Og jeg kunne godt tænke mig at lave en side hvor man kan bladre i nogle forskellige billeder med en knap der hed "Næste" og "Forrige". Altså der kommer et nyt billede for hver gang jeg trykker næste og kan gå tilbage ved at sige forrige. Billederne der skifter skulle være placeret midt på siden med knapperne under billederne.

Skulle være rimeligt simpelt, hvilket det sikkert også er, jeg er bare ikke lige klar over hvordan ?

/Henne
Avatar billede thesurfer Nybegynder
23. august 2002 - 19:06 #1
Jeg har lavet noget i JavaScript.. det er ikke svært at rette til..

se testen:

http://thesurfer.frip.dk/exp/henne/billeder/

er det noget ligende du skal bruge ?

/theSurfer.
Avatar billede thesurfer Nybegynder
23. august 2002 - 19:28 #2
her er koden:



note:<br>
i testen er der kun 2 billeder.<br>

<center>

<!--

Navigationen er placeret øverst så den ikke forsvinder
hvis det er et stort billede.

//-->

<a href="#" onClick="visbillede('tilbage'); return false;">Forrige</a> - <a href="#" onClick="visbillede('frem'); return false;">Næste</a>
<br><br>


<!--

Selve billedet vises her

//-->

<img src="billede1" name="billede">

</center>

<!--

Dette script skifter billede vha en tæller.

Billederne skal bare hedde "billedeX" hvor X er et nummer.

f.eks.:

billede1, billede2, billede3 osv..

** Læg mærke til at der IKKE står nogen endelser! **

Dette gør det nemmere at vise billederne, da det så
(næsten) er lige meget hvilket format det er i.

//-->

<script language="javascript">
counter = 1; // start ved billede1 <-- 1

max_antal_billeder = 2; // ret antal billeder der skal vises

function visbillede(retning)
{

  // her finder vi ud af om vi skal frem eller tilbage:

  if (retning == 'tilbage') {

    // der trækkes 1 fra tælleren:

   

    // hvis tælleren kommer under 0, skal den sættes til 1
    // da det første billede hedder billede0:

    if (counter == 1) {
      alert('Dette er det første billede');
      counter = 1
    } else {
      counter = counter - 1;
    }

  } else {

    // der lægges 1 til tælleren:

   
    if (counter == max_antal_billeder) {
      alert('Dette er det sidste billede!');
//      counter = counter - 1;
    } else {
      counter = counter + 1;
    }


  }

// Billedet vises:

document.billede.src = 'billede' + counter;
}

// Denne funktion kaldes ved onError i img-tagget.
// Dette virker vist nok kun i Internet Explorer!:
function fejl()
{
//visbillede('tilbage');
//alert('Dette er det sidste billede!');
}

document.billede.src = 'billede' + counter;
</script>



/theSurfer.
Avatar billede henne Nybegynder
23. august 2002 - 20:23 #3
Det er præcis det det skal være. Det er kanon!!
Kan du evt. lave det sådanne at man begynder forfra når der ikke er flere billeder??
Avatar billede thesurfer Nybegynder
24. august 2002 - 13:59 #4
jada :)

laver det lige om..
Avatar billede thesurfer Nybegynder
24. august 2002 - 14:05 #5
skal de virke begge veje ?

eller kun når man klikker på "næste" og der så ikke er flere billeder?
Avatar billede thesurfer Nybegynder
24. august 2002 - 14:10 #6
hmm.. hvis den allerede viser det første billede skal den vel bare sige "Dette er det sidste billede!".. og ved den sidste side skal den vel bare starte ved det første billede..


her er koden:



note:<br>
i testen er der kun 2 billeder.<br>

<center>

<!--

Navigationen er placeret øverst så den ikke forsvinder
hvis det er et stort billede.

//-->

<a href="#" onClick="visbillede('tilbage'); return false;">Forrige</a> - <a href="#" onClick="visbillede('frem'); return false;">Næste</a>
<br><br>


<!--

Selve billedet vises her

//-->

<img src="billede1" name="billede">

</center>

<!--

Dette script skifter billede vha en tæller.

Billederne skal bare hedde "billedeX" hvor X er et nummer.

f.eks.:

billede1, billede2, billede3 osv..

** Læg mærke til at der IKKE står nogen endelser! **

Dette gør det nemmere at vise billederne, da det så
(næsten) er lige meget hvilket format det er i.

//-->

<script language="javascript">
start = 1; //  start ved billede1 <-- 1
counter = start; // start ved det første billede

max_antal_billeder = 2; // ret antal billeder der skal vises

function visbillede(retning)
{

// her finder vi ud af om vi skal frem eller tilbage:

if (retning == 'tilbage') {

  // der trækkes 1 fra tælleren:

 

  // hvis tælleren kommer under 0, skal den sættes til 1
  // da det første billede hedder billede0:

  if (counter == 1) {
  alert('Dette er det første billede');
//    counter = 1
    counter = start;
  } else {
    counter = counter - 1;
  }

} else {

  // der lægges 1 til tælleren:

 
  if (counter == max_antal_billeder) {
//  alert('Dette er det sidste billede!');
//    counter = counter - 1;
    counter = start;
  } else {
    counter = counter + 1;
  }


}

// Billedet vises:

document.billede.src = 'billede' + counter;
}

// Denne funktion kaldes ved onError i img-tagget.
// Dette virker vist nok kun i Internet Explorer!:
function fejl()
{
//visbillede('tilbage');
//alert('Dette er det sidste billede!');
}

document.billede.src = 'billede' + counter;
</script>



/theSurfer.
Avatar billede thesurfer Nybegynder
24. august 2002 - 14:52 #7
rettelse:

>hmm.. hvis den allerede viser det første billede skal den vel bare sige "Dette er det sidste billede!"..<

skulle have været "Dette er det første billede!".. "sidste" -> "første"..


PS: Denne del kan du fjerne (det var bare en test):
---

// Denne funktion kaldes ved onError i img-tagget.
// Dette virker vist nok kun i Internet Explorer!:
function fejl()
{
//visbillede('tilbage');
//alert('Dette er det sidste billede!');
}

---


/theSurfer.
Avatar billede thesurfer Nybegynder
24. august 2002 - 14:55 #8
ved den nedereste del:

document.billede.src = 'billede' + counter;
</script>

kan du vist også fjerne:
document.billede.src = 'billede' + counter;


det er fordi jeg har haft gang i 2 metoder på een gang :)
og så har jeg lavet en nogle tests..

/theSurfer.
Avatar billede henne Nybegynder
25. august 2002 - 16:42 #9
Det er kanon! Præcis sådanne jeg havde forestillet mig.

TAK!!
Avatar billede thesurfer Nybegynder
25. august 2002 - 16:52 #10
Det er jeg glad for at høre!

Takker for points :)

/theSurfer.
Avatar billede henne Nybegynder
26. august 2002 - 12:04 #11
Jeg har prøvet at lægge det op, fuldstændigt magen til dit. Men den viser ikke billederne! Hvad gør jeg galt ??
http://www.kapacitet.as/sally/billed.htm
Avatar billede henne Nybegynder
26. august 2002 - 21:06 #12
Jeg opretter et spørgsmål til dig på 30 points, hvis du gider at hjælpe mig med ovenstående spørgsmål.
Hvad går jeg galt ?
Avatar billede henne Nybegynder
26. august 2002 - 21:07 #13
Hvad gør jeg galt (mener jeg selvfølgelig)???
Avatar billede thesurfer Nybegynder
27. august 2002 - 19:27 #14
undskyld jeg ikke har checket spørgsmålet..


hmm.. det ser ud til at "billede1" ikke eksisterer..

du har husket at kalde den "billede1" og ikke f.eks. "billede1.jpg" eller ".bmp" (osv)?
Avatar billede thesurfer Nybegynder
27. august 2002 - 19:28 #15
og i hvilket format er billede1?
Avatar billede thesurfer Nybegynder
27. august 2002 - 19:29 #16
jeg kan se at du har kaldt billederne "billede1.gif" og "billede2.gif"..

fjern ".gif" fra filnavnet og så skulle det virke.

/theSurfer.
Avatar billede thesurfer Nybegynder
27. august 2002 - 19:31 #17
Du behøver ikke at give mig flere points for denne opgave.

/theSurfer.
Avatar billede thesurfer Nybegynder
28. august 2002 - 00:49 #18
sig lige til om det virker, og om det ikke virker..
Avatar billede thesurfer Nybegynder
29. august 2002 - 17:48 #19
takker for points
Avatar billede henne Nybegynder
29. august 2002 - 17:54 #20
Det virker nu. Mange tak for hjælpen!

Velbekommen..
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
Kurser inden for grundlæggende programmering

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