HTML-sivuille on mahdollista lisätä alaviitteitä, jotka tulevat näkyviin vasta, kun niitä napsautetaan. Tässä esitettyä menetelmää käyttämällä alaviitteen sisältö näkyy siinä kohdassa tekstiä, johon alaviite liittyy. Samalla vältytään ongelmilta, jotka aiheutuvat perinteisten alaviiteratkaisujen käytöstä, kuten alaviitteiden sijoittamisesta erilliseen ”kehykseen” tai yhtenäiseksi luetteloksi tekstin loppuun.
Esitetty menetelmä toimii mielekkäästi riippumatta siitä, onko käytössä CSS + JavaScript vai ei. Ensin mainitussa tapauksessa alaviitteistä näytetään pelkkä numero. Alaviitteen tekstin saa näkyviin napsauttamalla numeroa, minkä jälkeen tekstin voi piilottaa napsauttamalla alaviitettä uudelleen. Kun sivu tulostetaan, kaikki alaviitteet tulostuvat tekstin sekaan pelkkinä numeroina ja niiden sisältö näkyy erikseen loppuviitteinä. Jos CSS ja JavaScript taas eivät ole käytössä, kaikkien alaviitteiden teksti näkyy tekstin seassa hakasulkeissa niin näytöllä kuin tulostettaessakin.
Menetelmä näyttää toteutettuna seuraavalta:
Tämä on esimerkkivirke, jota seuraa alaviite.[1: Alaviitteen sisältö näkyy tässä.] Tämä on alaviitteen jälkeinen virke.
Tämän menetelmän pääasiallinen käyttötarkoitus on alaviitteiden mahdollisimman yksinkertainen toteuttaminen opinnäytteiden HTML-versioihin.
Huom. Koodi on tarjolla myös erillisenä tiedostona.
Tavoitteenani oli mahdollisimman yksinkertainen ratkaisu, joka ei aiheuttaisi ongelmia poikkeustilanteissa. Alaviitteiden teksti sijoitetaan ensin hakasulkeisiin varsinaisen leipätekstin sekaan seuraavalla tavalla (tässä esimerkissä alaviitteen numero on 14):
Tekstiä.[14: Alaviitteen teksti.] Tekstiä.
Teksti näyttää oletusarvoisesti tältä käyttäjälle, jolla CSS ja JavaScript eivät ole käytössä. Piilotettavan osan ympärille (”: Alaviitteen teksti”) asetetaan <span>-tagit seuraavasti:
<span class="av2"><span class="av3" id="alaviite14">:
Alaviitteen teksti.</span></span>
Sisempi <span> (class="av3") piilotetaan CSS:llä. Sille on määritelty id="alaviite14", jotta se voidaan haluttaessa näyttää ja piilottaa JavaScriptillä. Ulompi <span> (class="av2") piilotetaan CSS:llä vain tulostettaessa. Koska av3 on av2:n sisällä, alaviitteen teksti jää tulostettavassa versiossa aina piiloon, olipa av3 näkyvissä näytöllä tai ei.
Koko alaviite hakasulkeet mukaanlukien sijoitetaan vielä yksien <span>-tagien sisään (class="av1"). Näin koko alaviitteelle voidaan määritellä ulkoasu CSS:llä. Kyseiselle <span>ille määritellään vielä onclick="viite('alaviite14');". Tässä viite() on JavaScript-funktio, joka näyttää ja piilottaa alaviitteen, ja alaviite14 on piilotettavan av3-spanin id. Edellisessä kohdassa annetun HTML-koodin eteen sijoitetaan siis seuraava alkutagi, hakasulku ja alaviitteen numero (ja vastaavasti sen jälkeen ]</span>-lopetus):
<span class="av1" onclick="viite('alaviite14');">[14
Alaviitteen tekstin näyttämiseen ja piilottamiseen tarvittava yleinen JavaScript-koodi on kokonaisuudessaan tässä:
function viite(alaviite) {
s = document.getElementById(alaviite).style;
if (s.display == "inline") s.display = "none";
else s.display = "inline";
}
Jotta alaviitteet näkyisivät tulostettaessa loppuviitteinä, asiakirjan loppuun tarvitaan yksinkertainen koodinpätkä, joka kopioi kaikkien alaviitteiden tekstin vain tulostettaessa näkyvään diviin (jolle määritetään class="vaintulostus"). Tässä muuttuja, jonka nimi on alaviitteidenMaara, tulee tietenkin korvata alaviitteiden määrän ilmoittavalla luvulla:
for (i = 1; i <= alaviitteidenMaara; i++)
document.write("<p><b>" + i + "<\/b>"
+ document.getElementById("alaviite" + i).innerHTML + "<\/p>");
Tarvittava CSS-koodi on alla. Tästä osa kannattaa määritellä JavaScriptillä sen varalta, että CSS on käytössä, mutta JavaScript ei:
.av1 { background-color: #ccc;
text-decoration: underline;
cursor: pointer }
.av1:hover { background-color: #aaa }
.av3 { display: none }
.vaintulostus { display: none }
@media print {
.av2 { display: none }
.vaintulostus { display: block }
}
Kannattaa huomata, että (X)HTML-maailman omalaatuisuuksista johtuen tässä annettu JavaScript-koodi ei toimi – tai ainakaan sen ei pitäisi toimia –, jos asiakirjan DOCTYPE on XHTML-tyyppinen. En ole kiinnostunut ainakaan itse tekemään versiota, joka toimisi myös XHTML-asiakirjojen kanssa. Koska peruskouluaikojen jälkeinen ohjelmointikokemukseni on olematon, tässä esitetyssä menetelmässä saattaa esiintyä muitakin ongelmia. Käytännön kokeilujen perusteella kehdannen silti väittää sitä vähintäänkin ”robustihkoksi”, sikäli kuin moisesta voi tässä asiayhteydessä puhua.