Näytä/piilota sisäänkirjautuminen kätevästi

Osoitteessa http://www.uncharted.ca/ on sisäänkirjautuminen piilotettu ovelasti siten, että kirjautumis-lomakkeen saa myös helposti esille. Klikattaessa sini-harmaan reunaviivan oikeaa yläkulmaa (ks. kuva), hakulomakkeen tilalle ilmestyy kirjautumislomake.

Miten tämä on siis tehty? Javascriptin ja CSS:n avulla. Seuraava Javascript-pätkä hoitaa lomakkeen näyttämisen:

function showDiv(div)
{
  var se = document.getElementById('search');
  se.style.visibility = 'hidden';
  se.style.display = 'none';
 
  var elm = document.getElementById(div);
  elm.style.visibility = 'visible';
  elm.style.display = 'block';
}

Sitä voidaan kutsua esim. näin:

<img src="/images/spacer.png" onclick="javascript:showDiv('loginbox');" height="10" width="10" alt="." />

Niiden lisäksi tarvitset mm. seuraavaa:

• <div class="loginbox">, jonka sisälle tulee kirjautumislomake
• <div class="search">, jonka sisälle tulee hakulomake
• 10 x 10px läpinäkyvä kuva (spacer.png). Jos et osaa tehdä, hae täältä: http://www.uncharted.ca/images/spacer.png

Jos on ongelmia, tutki tuon sivuston lähdekoodia ja yritä hakea ratkaisua ongelmaasi sieltä. Muista myös, että jos käytät tätä omilla sivuillasi, on kohteliasta mainita lähde sivupohjassasi esim. näin: <!-- Login script adapted from http://www.uncharted.ca/ -->.