Vaiheittaiset ohjeet JavaScript-navigoinnin tekemiseen

Noudata näitä ohjeita tarkoin, tai navigointiratkaisu ei toimi halutulla tavalla. Muista, että navigointilistaan kannattaa laittaa enintään seitsemän valintaa. Jos valintoja on useampia, ne kannattaa jakaa useampaan ryhmään ja eri sivuille. Kapea ja korkea hierarkia on parempi kuin matala ja leveä.

  1. Tee navigoinnissa käytettävät kuvat haluamallasi kuvankäsittelyohjelmalla. Jokaista valintaa varten tarvitaan kaksi samankokoista kuvaa, tavallinen ja korostettu. Anna tavallisille kuville nimiksi navi1a.gif, navi2a.gif jne. Anna korostetuille kuville nimiksi navi1b.gif, navi2b.gif jne.
  2. Lisää HTML-dokumentin BODY-komennolle onload-tapahtumankäsittelijä: 
    <BODY bgcolor="#FFFFFF" text="#000000" onload="makeNavi(3)">
    Tässä numero 3 on navigointivalintojen lukumäärä. Muista vaihtaa se oman sivusi mukaiseksi!
  3. Tee A-komennolla navigointilinkki, jolle asetetaan mouseover- ja mouseout-tapahtumankäsittelijät. Mallikomento: 
    <A href="johonkin.html" onmouseover="imageOn(1)" onmouseover="imageOff(1)"></A>
    Linkin sisällä ei ole vielä mitään.
  4. Lisää edellisessä kohdassa tekemäsi linkin sisälle IMG-komento johon ladataan tavallinen kuva. Mallikomento: 
    <IMG name="navi1" src="navi1a.gif" width="122" height="32" border="0" alt="(haluamasi teksti)">
    Vaihda width- ja height-lisämääritteisiin kuvan todellinen koko ja muuta alt-teksti kuvan tarkoituksen mukaiseksi.
  5. Toista kohdat 3 ja 4 kaikille valinnoille. Jokaisessa komennossa on useita muutettavia kohtia. Linkin kohde pitää asettaa oikein, mutta myös kuvien numeroiden imageOn- ja imageOff-kutsuissa pitää vastata kuvia, eli kakkoskuvalle tulee siis imageOn(2) sekä imageOff(2) jne. Lisäksi IMG-komennossa pitää vaihtaa kuvan name-lisämäärite, siis navi1, navi2 jne. ja tietysti kuvatiedoston nimi.