The Last Spawn Point <style type="text/css"> body { background-color: silver; } /* Valikkosysteemin tyylit */ #herate { position: fixed; z-index: 97; top: 0px; left: 0px; width: 100%; height: 0.5ex; overflow: hidden; background-color: #aca; } #palkki { position: fixed; top: 0px; left: 0px; height: 2.5ex; width: 100%; z-index: 98; visibility: hidden; padding-bottom: 2px; background-color: #dee; } .valikko { position: fixed; top: 0px; width: 25%; z-index: 99; visibility: hidden; overflow: visible; } .juuri { position: relative; top: 0px; height: 2.5ex; z-index: 99; padding-bottom: 2px; text-align: center; font-weight: bold; background-color: #dee; } .linkki { position: relative; height: 2.5ex; z-index: 99; visibility: hidden; border-top: dotted 1px silver; padding-left: 1em; padding-bottom: 2px; background-color: white; text-align: left; } .v0 { left: 0px; } .v1 { left: 25%; } .v2 { left: 50%; } .v3 { left: 75%; } </style> <script type="text/javascript"> //<![CDATA[ // IE:n vaatimat toiminnot // ======================= // IE6 ei toteuta CSS2:n piirrettä "position: fixed", jota // käytetään vieritettäessä paikallaan pysyvien elementtien sijoitteluun. // Tästä syystä fixed-elementit muutetaan IE:ssä absolute-sijoitetuiksi // ja siiretään niitä aina ikkunaa scrollattaessa. var onIE = /explorer/i.test(navigator.appName); var pidettavat = []; // Ikkunan onscroll-tapahtumankäsittelijä. Siirtää paikallaan pidettävät // (fixed) elementit ikkunan yläreunaan. Sivusuunnassa elementit // scrollaavat mukana, koska sivuttainen uudelleensijoittelu olisi // hankalaa, kun elementtien sivuttaissijainnit ovat suhteessa ikkunan // leveyteen (prosenttiluvut). function pidaPaikallaan() { for (var i=0; i<pidettavat.length; i++) { pidettavat[i].style.top = document.documentElement.scrollTop+'px'; } // Poista kommenttimerkit seuraavalta riviltä, niin näet statuspalkissa // ikkunan vasemmassa yläkulmassa olevan dokumenttipisteen koordinaatit //status = document.documentElement.scrollLeft+','+document.documentElement.scrollTop; } // Dokumentin onload-tapahtumankäsittelijän kutsuma funktio tunnistaa // IE:n ja kerää fixed-elementit taulukkoon "pidettavat" ja asentaa // onscroll- ja onresize- tapahtumankäsittelijän. Näissä tilanteissa // ja myös heti dokumentin lataamisen jälkeen valikkopalkin paikka // on tarkistettava. function alusta() { if (onIE) { pidettavat.push(elem('palkki')); pidettavat.push(elem('herate')); for (var i=0; i<vLkm; i++) { pidettavat.push(elem('valikko'+i)); } for (var i=0; i<pidettavat.length; i++) { pidettavat[i].style.position = 'absolute'; } window.onscroll = pidaPaikallaan; window.onresize = pidaPaikallaan; pidaPaikallaan(); } } // Kaikissa selaimissa tarvittavat toiminnot // ========================================= var linkinVari = 'white'; var linkinKorostus = 'yellow'; var juurenVari = '#dee'; var juurenKorostus = '#aca'; var vLkm = 4; // valikoiden lukumäärä var vPit = [4,5,4,2]; // valikoiden pituudet var valittu = -1; // Kirjoittamisvaivoja vähentävä apufunktio. function elem(id) { return document.getElementById(id); } // Valikko onclick-käsittelijässä kutsuttava funktio. function mene(v,uri) { katkeValikko(v); if (uri != undefined) location.href = uri; } // Funktio ottaa esille valikkopalkin. function naytaValikkopalkki() { clearTimeout(kvp); elem('palkki').style.visibility = 'visible'; for (var i=0; i<vLkm; i++) { var valikko = elem('valikko'+i); elem('juuri'+i).style.backgroundColor = juurenVari; elem('valikko'+i).style.visibility = 'visible'; } } // Funktio kätkee valikkopalkin n. 0,5 sekunnin viiveellä. // Jos viiveen aikana kutsutaan funktiota naytaValikkopalkki, // ajastus keskeytyy ja palkkia ei kätketä lainkaan. var kvp; function katkeValikkopalkki() { clearTimeout(kvp); kvp = setTimeout('kv()',500); } function kv() { for (var i=0; i<vLkm; i++) { elem('valikko'+i).style.visibility = 'hidden'; } elem('palkki').style.visibility = 'hidden'; } // Funktio näyttää valikon ja korostaa valikon juurielementin. // Funktiota käytetään, kun osoitin siirtyy valikon juurielementin // tai valikon muun osan päälle. function naytaValikko(v) { naytaValikkopalkki(vLkm); elem('juuri'+v).style.backgroundColor = juurenKorostus; for (var i=0; i<vPit[v]; i++) { var linkki = elem('linkki'+v+i); linkki.style.backgroundColor = linkinVari; linkki.style.visibility = 'visible'; } if (valittu>=0) { elem('linkki'+v+valittu).style.backgroundColor = linkinKorostus; } } // Funktio kätkee valikon ja poistaa sen juurielementin korostuksen. // Funktiota käytetään, kun osoitin siirtyy valikon juurielementin // tai valikon muun osan päältä. function katkeValikko(v) { for (var i=0; i<vPit[v]; i++) { var linkki = elem('linkki'+v+i); linkki.style.visibility = 'hidden'; } valittu = -1; elem('juuri'+v).style.backgroundColor = juurenVari; katkeValikkopalkki(vLkm); } // Funktio korostaa valikkolinkin merkitsemällä sen valituksi ja // näyttämällä valikon uudelleen. Käyttö: valikkolinkkien onmouseover- // käsittelijät. function korosta(v,i) { valittu = i; naytaValikko(v); } // Funktio poistaa valikkolinkin korostuksen ja kätkee koko // valikkopalkin. Käyttö: valikkolinkkien onmouseout-käsittelijät. function poistaKorostus(v) { for (var j=0; j<vPit[v]; j++) { var linkki = elem('linkki'+v+j); linkki.style.backgroundColor = linkinVari; linkki.style.visibility = 'hidden'; } valittu = -1; // Lisätty versiossa 03-1 katkeValikkopalkki(vLkm); } //]]> </script>