Sådan laver du en Splash Page

Den Splash Page, du evt. lige har set (Simpel "Splash Page"), er et af mange mulige eksempler på, at man ikke nødvendigvis behøver at gribe til Flash-programmering for at lave den slags effekter. Fordelen ved at bruge dynamisk HTML er, at en sådan side kan ses af alle browsere, uanset om de har en Shockwave plugin eller ej. Desuden er overførselstiden meget lille i forhold til enhver anden form for dynamiske effekter. Hele siden vejer omkr. 3 kilobyte og overføres på under 1 sekund med selv det langsomste modem. Vil du lave noget med grafik, ta'r det meget længere tid. Du kan se et eksempel på en grafisk splashpage på websiden Grafisk "Splash Page"

Scriptet

- er der såmænd ikke mange ben i:

<script type="text/javascript">
function start(){
  runIt()
}
function runIt(){
  next()
  timer = setTimeout('runIt()',500)
}
var nr=0;
function next(){
  nr=nr+1 
  if (nr==18) 
    location.href="home.html";
  else
    visObjekt('letter' + nr)
}
</script>

Funktionen start() udløses onLoad. Denne funktion gør det, at den

1. Centrerer det aktive område på skærmen (i det vandrette), og
2. dernæst udløser funktionen runIt().

Centringsfunktionen er en del af et JavaScript modulbibliotek, jeg har lavet mig. Om den sag kan du læse mere på websiden DHTML modulbibliotek.

funktionen runIt() udløser nøglefunktionen next() 17 gange med ½ sekunds mellemrum. next() lægger én til nr hver gang funktionen udløses. På den måde køres funktionen visObjekt() igennem 17 gange. Den 18. gang stilles om til denne side. visObjekt() en også hentet fra mit JavaScript modulbibliotek. Hver gang denne funktion udløses, gøres et bogstav synligt.

De enkelte bogstaver ligger i hver deres DIV med en ID bestående af ordet letter + et tal fra 1 til 17, f.eks.:

  <div id="letter1" class="text">
  i
  </div>

Bogstaverne formateres af CSS-klassen .text, mens deres position og forgrundsfarve bestemmes af 17 #ID-referencer, f.eks.:

  #letter1{
    left:0px;
    color:#336699;
  }

Et script som dette kan udbygges til at være universalt anvendeligt til mange forskellige formål, ikke blot vise og skjule elementer, men også flytte dem eller til lave slideshows med.

Senest opdateret: 6.nov. 2003.