Keskustelu: Nettisivujen teko: Javascrptillä kuvan vaihto

Tarkoitus olisi tehdä painikkeet kuvan vaihdolle.
Eli ensimmäinen kuva latautuu jonka alle tulisi painikkeet kuvina... (Edellinen-Seuraava).
Kun seuraavaa klikkaisi, vaihtuisi alkuperäinen kuva seuraavaan ja edellistä painiketta klikkaamalla taas edelliseen.

Olen tuon periaatteessa saanut toimimaan ilman noita painikkeita Onmouseoverilla, mutta miten saan sen noiden painikkeiden kautta toimimaan?

Vinkkejä? Esimerkkisciptejä?

Käytä painikkeen click-tapahtumaa.

<button onclick="seuraava()">Seuraava</button>

Jos tämä ei ollut se ongelmakohta, kerro lisää nykyisestä toteutuksestasi ja kuvaile tarkemmin, mikä kohta tuottaa ongelmia.

hmm.
Ei ihan vastannut mitä hain, mutta sain nyt tällaisen aikaiseksi:

<script type="text/javascript">
var kuvamaara = 2;
var laskuri = 1;
var Kuva1 = new Image();
Kuva1.src = "kuvat/1.png";
var Kuva2 = new Image();
Kuva2.src = "kuvat/2.png";

function DiaEsitysSeuraava() {
  if (document.images) {
    laskuri = laskuri + 1;
    if (laskuri > kuvamaara) {
    laskuri = 1;
    }
  document.Dia.src = eval("Kuva" + laskuri + ".src");
  }
}
function DiaEsitysEdellinen() {
  if (document.images) {
    laskuri = laskuri - 1;
    if (laskuri > kuvamaara) {
    laskuri = 1;
    }
  document.Dia.src = eval("Kuva" + laskuri + ".src");
  }
}
</script>

Lataan ensimmäisen kuvan normaalisti jossa ID on Dia.

Eli tämä toimii lähes kuten pitääkin.
Pari ongelmaa.

1. Edellinen painike ei toimi jos ensimmäisestä kuvasta yrittää mennä taaksepäin. Eli kohta "-1" tuossa scriptissä ei ole riittävä, joten miten tuota kohtaa pitäisi muuttaa.

2. Tarkoitus on tehdä sivulle useampia vastaavanlaisia kuvakollaaseja, jossa voi vaihtaa kuvaa. Miten tuo kannattaisi muuttaa siten, että se toimisi samalla sivulla useammalla kuvasarjalla?

En siis ole mikään javascript ammattilainen, mutta jonkin verran javascriptillä räpeltänyt.

Mod. lisäsi kooditagit

Toisinpäin tämä kyllä toimii, mutta kun mennään kuvia "taaksepäin", niin tässä ei ole käynyt kuin iso aivopieru. Mieti tätä vielä uudelleen.

laskuri = laskuri - 1;
if (laskuri > kuvamaara) {
laskuri = 1;
}

Otetaan uusiksi.
Jouduin muokkaamaamaan rankemmalla kädellä koko koodia jotta sain sen toimimaan monella kuvasarjalla.

Kaikki toimii vallan hienosti, mutta pienen muutoksen tarvitsisin.
Eli nyt functiona seuraavanlainen koodi:

function vaihda(sr) {
 if (maara+sr >= 1 && maara+sr <= loppu) maara += sr;
 document.getElementById('kuvatsr').src=kuvat[maara];
}

Eli toimii siten, että ei voi mennä ensimmäisestä kuvasta taaksepäin eikä viimeisestä eteen.
Haluttu muutos olisi että se ei stoppaisi kumpaankaan suuntaan mennessä, vaan looppaisi niin kauan kun klikataan joko eteen tai taakse.

Tarkoititko että jos viimeisestä kuvasta klikkaa "seuraava" se siirtyy takaisin aloittamaan kuvasta 1...

Pekka Mansikka kirjoitti:

Tarkoititko että jos viimeisestä kuvasta klikkaa "seuraava" se siirtyy takaisin aloittamaan kuvasta 1...

Juuri niin.
Ja jos klikkaa edellinen painiketta ensimmäisen kuvan kohdalla, niin se siirtyy viimeiseen, jne, jne.

En tuosta ihan tajunnut seuraava/edellinen juttua, mutta käsittääkseni ekalle ja viimeiselle ne joutuu asentamaan erikseen, eikä tuohon + tai - pyörään.

if (maara+sr > 1 && maara+sr < loppu) maara += sr;
if (maara+sr == 1) maara = loppu; // edellinen
if (maara+sr == loppu) maara = 1; // seuraava

Tuo "maara" taitaa olla sama kuin edellisen skriptin "laskuri" ja "loppu" sama kuin "kuvamaara"?

Laitetaan vielä muuttujat.

var kuvat = new Array();
kuvat[1]='kuva1.png';
kuvat[2]='kuva2.png';
var maara = 1, loppu = 3-1;

Pekka...
Testailen tuota esimerkkiäsi.

Kiitos kaikille tähän mennessä vastannaille.
Pääsin nopeasti hommassa eteenpäin.

Käytän javascriptiä sen verran vähän, että en ymmärtänyt, miten tuota funktiota kutsutaan... mikä tieto on tuo "sr"... seuraava vai edellinen?

Aloita taulukon indeksointi nollasta, kuten se JS:n taulukoilla toimii, ja kirjoita kuvien nimet suoraan listaksi. Indeksin voit korjata helposti jakojäännöksellä.

<img id="kuva" src="ladataan.png" alt="" />
<button id="seuraava">Seuraava</button>
<button id="edellinen">Edellinen</button>

var kuvat = [
  "kissa.png",
  "kala.png",
  "kuppabakteeri.png"
];
var indeksi = 0;

function vaihda(uusi) {
  // Seuraava kikka korjaa indeksin välille [0, n-1]: i = (i % n + n) % n.
  indeksi = (uusi % kuvat.length + kuvat.length) % kuvat.length;
  document.getElementById("kuva").src = kuvat[indeksi];
}

window.onload = function() {
  vaihda(0);
  document.getElementById("seuraava").onclick = function() {
    vaihda(indeksi + 1);
  };
  document.getElementById("edellinen").onclick = function() {
    vaihda(indeksi - 1);
  };
};

Eli tämän näköinen koodi joka toimii ihan hyvin:

<script type="text/javascript">
var kuvat = new Array();
kuvat[0]="kuva1.png";
kuvat[1]="kuva2.png";
kuvat[2]="kuva3.png";
var kuvatmaara = 0, kuvatloppu = 2-0;

function vaihdakuvat(sr) {
 if (kuvatmaara+sr >= 1 && kuvatmaara+sr <= kuvatloppu) kuvatmaara += sr;
 document.getElementById("kuvatsr").src=kuvat[kuvatmaara];
}
</script>

Laitetaan kuva (kuva1.png) sivulle.
Annetaan sille ID kuvatsr

Tehdään linkki (edellinen) jota kutsutaan javascript:vaihdakuvat(-1)
Tehdään linkki (seuraava) jota kutsutaan javascript:vaihdakuvat(+1)

Tämä toimii siis siten, että esimerkiksi seuraava linkki vaihtaa kuvan siihen saakka kunnes tullaan kuvasarjan loppuun.

Tuolla onclick tapahtumalla saisi toimimaan helpostikin että se luuppaa kuvasarjaa, mutta en haluaisi käyttää tuota onclick tapahtumakutsua (huonoja kokemuksia käytännöstä). Eli funktiomuutoksella pitäisi selvitä... Mutta miten?
Samoin edellinen ja seuraava pitäisi tapahtua saman funktion sisällä, kuten nyt tuossa se toimii vain vaihtamalla (SR) arvoa.

En itsekään ole mikään javascript guru. Vasta treenailen ja olen joitakin pikkujuttuja aikaisemmin tehnyt javascriptillä.