Webdesign 101 » Dynamisk HTML » Splash Pages

Splash Page med IE-specifik overblænding

Bemærk at det fade-filter, der er brugt til selve splash-siden, kun kan tolkes af Internet Explorer. www.webref.com er en artikel, der fortæller, hvordan du kan lave filtre, der tolkes både af Internet Explorer og andre DHTML-browsere.

Artiklen er ikke opdateret til at omfatte moderne W3C-kompatible browsere, men kan dog tjene som en rettesnor for videreudvikling af sådanne filtre.

Som nævnt på foregående side er websiden Sådan laver du en Splash Page et eksempel på, hvorledes du med ret enkle midler kan lave en stærk visuel effekt. Splash Page med overblænding er et eksempel, hvor der anvendes nogle billeder i stedet for blot bogstaver - et måske mere realistisk eksempel. På websiden Splash Page med "Image Load Status Bar" fik du en forklaring på, hvorledes du kan gøre den tid, der går med indlæsningen af billederne, en anelse mere interessant for den ventende bruger. Denne side handler om den visuelle effekt på den side, der laves ved hjælp af disse preloadede billeder.

Billederne

Der er anvendt 2 billeder, der hver er op i 6 lige store felter på 150 x 150 pixel. På websiden er de 6 delbilleder lagt ind i nogle CSS-kasser, således:

<div id="forsidepix">
  <div id="forsidepixtop">
    <img class="pix" id="forside1" src="forside1.jpg" 
    width="150" height="150" border="0">
    <img class="pix" id="forside2" src="forside2.jpg" 
    width="150" height="150" border="0">
    <img class="pix" id="forside3" src="forside3.jpg" 
    width="150" height="150" border="0">
  </div>
  <div id="forsidepixbottom">
    <img class="pix" id="forside4" src="forside4.jpg" 
    width="150" height="150" border="0">
    <img class="pix" id="forside5" src="forside5.jpg" 
    width="150" height="150" border="0">
    <img class="pix" id="forside6" src="forside6.jpg" 
    width="150" height="150" border="0">
  </div>
</div>

Bemærk her, at jeg for at gøre denne kode læselig har indsat linieskift og tabuleringer i koden. Der bør ikke være nogen linieskift eller mellemrum mellem markørerne i denne kode. En del browsere tolker sådanne tegn som en pixel eller to, og det kan fuldstændigt forrykke den tilsigtede orden i opsætningen af de 6 delbilleder.

Delbillederne formateres via class'en .pix:

.pix{
  filter:blendTrans(duration=1);
  width:150px;
  height:150px;
  margin:0px;
  padding:0px;
}

Det filter, jeg bruger er et såkaldt overblændingsfilter, der via en fade-effekt blænder fra et billede til et andet. Derfor er der defineret en filter-egenskab for class'en .pix. Desuden er hvert delbillede tildelt en unik ID.

I Microsofts dokumentation af disse filtre kan du finde den JavaScript-kode, der sætter overblændingen i gang. For delbilledet med ID'en forside1 vil denne kode se således ud:

function run1(){
  forside1.filters.blendTrans.Apply();
  forside1.src = "forside1a.jpg";
  forside1.filters.blendTrans.Play()
}

Helhedseffekten - det, at hvert delbillede overblændes for sig, det ene efter det andet - skabes nu af et overordnet script, der ser således ud:

function start(){
  if (document.all) {
    setTimeout('run1()',1000)
    setTimeout('run2()',2000)
    setTimeout('run3()',3000)
    setTimeout('run4()',4000)
    setTimeout('run5()',5000)
    setTimeout('run6()',6000)
    setTimeout('visSide()',8000)
  }
  else
    location.replace('otherhome.html')
}
function visSide(){
  location.replace("statusbarkode.php")
}
onload=start

Som du ser, startes en ny overblænding af 1 sekunds varighed (stylesheet'ets filter-regel) hvert sekund. Efter den sidste overblænding indlæses den egentlige webside - dette tilfælde den første af de to sider, der forklarer dels statusbjælken og dels denne visuelle effekt.

Bemærk, at jeg tester for, om browseren er en Microsoft-browser (if (document.all)), da kun disse browsere har adgang til at bruge disse filtre. Hvis denne betingelse ikke er opfyldt - f.eks. hvis siden læses af Netscape, Opera eller Mozilla - vises splashsiden uden dynamiske effekter.

Bemærk også, at jeg anbefaler location.replace("url") i stedet for location.href="url". Den sidste er ganske vist anvendt i eksemplet, fordi jeg ønsker, at du skal kunne gå tilbage til splash-siden for at beundre mit værk ved hjælp af browserens tilbage-knap. location.replace("url") fjerner splash-siden fra browserens historik, så browserens tilbage-knap ikke fører brugeren tibage til den indholdsløse splash-side, men til den side, hvor hun oprindeligt kom fra.

Koden til hele siden

8 sekunders spilletid skulle være nok til, at du kan nå at gemme min Splash Page for at se nærmere på koden. Men for ikke at teste din reaktionstid i en muligvis sen nattetime, gengiver jeg koden til hele siden herunder. Marker hele boksens indhold med musen og tast CTRL-C. Så ligger koden på dit Windows klippebord klar til at blive sat ind i din egen editor.

<html>
<head>
  <title>Splash Page med billeder - Microsoft-browsere</title>
  <style type="text/css">
    body {
      padding:1px;
      margin:1px;
      background-image:url(res/bg.gif);
      background-repeat:repeat;
      background-attachment:fixed;
    }
    #rubrik h1 {
      font-size:48px; 
      text-decoration: underline overline;
      color:#eee;
      margin-top:20px;
      margin-bottom:20px;
    }
    
    #forsidetitel p {
      font-size:16px;
      text-decoration:overline underline;
    }
    
    #forsidepixtop{visibility:visible;}
    
    #rubrik{
      position : absolute;
      left : 50%;
      width : 456px;
      margin-left : -225px;
      text-align:center;
    }
    .pix{
      filter:blendTrans(duration=1);
      width:150px;
      height:150px;
      margin:0px;
      padding:0px;
    }
    #forsidepix{
      position : absolute;
      left : 50%;
      width : 456px;
      margin-top : 90px;
      margin-left : -225px;
      z-index:2;
    }
    
    #forsidetitel{
      position : absolute;
      color:white;
      font-weight:bold;
      left : 50%;
      width : 460px;
      margin-top : 410px;
      margin-left : -225px;
      text-align:center;
    }
    img {
      margin:0px;
      border:1px solid white;
      padding:0px;
      z-index:1
    }
    #skipintro{
      position:absolute;
      right:10px;
      bottom:10px;
      border-color:#036;
    }
  </style>

  <script type="text/javascript">
  function start(){
    if (document.all) {
      setTimeout('run1()',1000)
      setTimeout('run2()',2000)
      setTimeout('run3()',3000)
      setTimeout('run4()',4000)
      setTimeout('run5()',5000)
      setTimeout('run6()',6000)
      setTimeout('visSide()',8000)
    }
  }
  function visSide(){
    location.href="statusbarkode.php"
  }
  onload=start
  function run1(){
    forside1.filters.blendTrans.Apply();
    forside1.src = "res/forside1a.jpg";
    forside1.filters.blendTrans.Play()
  }
  function run2(){
    forside2.filters.blendTrans.Apply();
    forside2.src = "res/forside2a.jpg";
    forside2.filters.blendTrans.Play()
  }
  function run3(){
    forside3.filters.blendTrans.Apply();
    forside3.src = "res/forside3a.jpg";
    forside3.filters.blendTrans.Play()
  }
  function run4(){
    forside4.filters.blendTrans.Apply();
    forside4.src = "res/forside4a.jpg";
    forside4.filters.blendTrans.Play()
  }
  function run5(){
    forside5.filters.blendTrans.Apply();
    forside5.src = "res/forside5a.jpg";
    forside5.filters.blendTrans.Play()
  }
  function run6(){
    forside6.filters.blendTrans.Apply();
    forside6.src = "res/forside6a.jpg";
    forside6.filters.blendTrans.Play()
  
  }
  </script>
</head>

<body background="res/bg.gif">
  <div id="rubrik">
  	<h1>WEBDESIGN 101</h1>
  </div>

  <div id="forsidepix">
  <div id="forsidepixtop"><img class="pix" id="forside1" src="res/forside1.jpg" alt="" width="150" height="150" border="0"><img class="pix" id="forside2" src="res/forside2.jpg" alt="" width="150" height="150" border="0"><img class="pix" id="forside3" src="res/forside3.jpg" alt="" width="150" height="150" border="0"></div><div id="forsidepixbottom"><img class="pix" id="forside4" src="res/forside4.jpg" alt="" width="150" height="150" border="0"><img class="pix" id="forside5" src="res/forside5.jpg" alt="" width="150" height="150" border="0"><img class="pix" id="forside6" src="res/forside6.jpg" alt="" width="150" height="150" border="0"></div>
  </div>
  
  <div id="forsidetitel"><p>- EN WEBDESIGN NOTESBLOK</p>
  </div>
  
  
  <div id="skipintro">
  <a href="statusbarkode.php"><img src="res/skipintro.gif" alt="" width="68" height="22" border="0"></a>
  </div>
</body>
</html>

Senest opdateret: 21. oktober 2003.

I denne sektion:

Introduktion
Vis noget andet mens siden indlæses
Simpel splash page
Kode til simpel splash page
Grafisk splash page
Koden til grafisk splash page
Preload med statusbjælke
Koden til statusbjælke

Tidsliniestyring

Et mere avanceret tidsliniescript finder du på websiden Tidslinie.

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.