Kirjautuminen
Tehtävät
Kilpailu
4. kierros:
7.11. klo 18 – 9.11. klo 23
Simppeli valokuva-albumi. Koodi on yksinkertainen, luulen että kaikki ymmärtävät. Jos haluat enemmän kuvia, niin lisää vain lisää <option>-tageja tuohon html koodiin.
Varsinainen Scripti
/* Tallenna tämä koodi tiedostopäätteellä .js samaan kansioon
missä sijaitsee valokuva-albumi.html tiedosto */
function vaihdaKuva()
{
// Viitataan pudotusvalikkoon sen ID:llä
var list = document.getElementById('optionlist');
// Kuva määräytyy pudotuvalikon arvon (indeksi) mukaan
document.mainimage.src = list.options[list.selectedIndex].value;
}
function eteenpain()
{
{
/* Lisätään indeksiä yhdellä, kuvan arvo kasvaa yhdellä.
Huomaa, että pudotusvalikon ID täytyy aina hakea uudelleen */
var list = document.getElementById('optionlist');
list = list.selectedIndex++;
}
// Vaihdetaan kuva pudotusvalikon arvon mukaiseksi
vaihdaKuva();
}
function taaksepain()
{
{
// Sama homma kuin äsken, nyt vain vähenentään arvoa yhdellö
var list = document.getElementById('optionlist');
list = list.selectedIndex--;
}
vaihdaKuva()
}Html koodi
<html> <head> <title>Galleria</title> <script src="foto-album.js" type="text/javascript"></script> </head> <body onload="vaihdaKuva()"> <center> <h1>Valokuva-Albumi</h1> <img style="height: 300px;" name="mainimage" border="2"> <form><input value="<<<" onclick="taaksepain()" type="button"> <select id="optionlist" onchange="vaihdaKuva()"> <option value="Kuva1.jpg">Kuva 1</option> <option value="Kuva2.jpg">Kuva 2</option> <option value="Kuva3.jpg">Kuva 3</option> <option value="Kuva4.jpg">Kuva 4</option> </select> <input value=">>>" onclick="eteenpain()" type="button"> </form> </center> </body> </html>
Aihe on jo aika vanha, joten et voi enää vastata siihen.