Tags:    html Du har sikkert set det flere steder, at når du fører din mus over et link, eller klikker på en knap dukker der et billede eller en forklarende tekst op. Du har måske også tænkt på hvordan man laver den slags ting.

Tekniken er en af de mest grundlæggende i Dhtml. Hvis du ikke er klar over det så er Dhtml en forkortelse for dynamisk html.
For at kode kan betegnes Dhtml kræves der, at man benytter følgende tre "kode sprog" til, at udføre en fælles opgave. De tre sprog er : Html, Css og Javascript.
Html skal bruges til, at lave en sides struktur, Css bruges til, at placerer elementer på siden samt, at beskrive deres formatering, Javascript bruges til, at manipulere sidens elementer.

For at kunne lave dette i Dhtml sammenhæng lille eksempel, skal jeg ved hjælp af Javascript ændre værdien af en Css egenskab der hedder visibility. Egenskaben kan sættes med en af to værdier: hidden eller visible.

Hvis man ikke har brug for, at ens kode virker i alle browsere kan man tilgå egenskaben direkte i et html tag med en javascript event F.eks.

<a href="en-side.htm" onmouseover="this.style.visibility='hidden'" 
onmouseout="this.style.visibility='visible'">En link tekst</a> 

Nu giver ovenstående kode jo ikke så meget mening, fordi resultatet af koden vil være, at i det øjeblik en bruger fører sin mus over link teksten vil teksten blive skjult! Men teknikken kan bruges til så meget andet f.eks kunne man vælge, at ændre skrift farven på link teksten på denne måde:

<a href="en-side.htm" onmouseover="this.style.color='red'" 
onmouseout="this.style.color='black'">En link tekst</a> 

Resultatet af koden vil være, at når en bruger føre sin mus over link teksten vil teksten blive rød og når musen fjernes fra link teksten vil teksten blive sort. På denne måde kan man ændre alle egenskaber ved et tag ved hjælp af metoden
this.style.css-egenskab='en-gyldig-css-værdi'. Kodeordet this er et reserveret ord i Javascript som fortæller browseren, at en egenskab skal tildeles det html element der indholder kodeordet.

Det var vist et lille sidespring artiklen skal jo handel om, at vise og skjule lag så ind på rette spor igen ;o)
Som nævnt giver ovenstående kode ikke så meget mening, i stedet for ovenstående kan man indsætte et billede eller, en tekst i et html element F.eks et div tag også skjule elementet når siden loades. Derefter kan elementets visibility egenskab så ændres fra et andet tag.

Hvis man skal kunne ændre på et tags egenskaber kræver det, at man kan identificerer taget, derfor skal man tildele taget et id F.eks:

<div id="layer-id-1">Tekst eller billede indhold</div>

Fordi at elementet skal være skjult når siden loades, skal man erklærer en visibility egenskab til id'et som er sat til hidden i et stylesheet f.eks: kan man så via Css erklærer nogle egenskaber til id'et på denne måde:

#layer-id-1
{
   visibility:hidden;
}

Elementet vil nu være skjult når siden loades, man kan så via Css erklærer nogle flere Css egenskaber til id'et f.eks position så man kan styrer hvor på siden elementet vises samt elementets formatering, når visibility egenskaben ændres.

For at man kan manipulere id'ets egenskaber skal man via Javascript fortælle browseren, hvilket id der er tale om. Det gøres med følgende DOM metode som hedder getElementById("navn-på-id"), det der står i parrentesen kaldes en parameter og skal bruges til, at identificere et konkret id i dette tilfælde id'et "layer-id-1". Derud over skal metoden knyttes til et objekt.
I Dhtml sammenhæng vil objektet altid være document objektet, DOM er en forkortelse for document object model.
Hele referencen til html elementet der indeholder id vil derfor se sådan her ud:

document.getElementById("layer-id-1")

Som du kan se knytter man objekt og metode sammen med et punktum, derud over er det MEGET vigtigt, at man husker gåseøjene omkring parameter værdien og at man overholder syntaksen med hensyn til store og små bogstaver i metoden getElementById.
Grunden til dette er, at i Javascript er der forskel på store og små bogstaver, skrives metoden ikke præcist som jeg har gjort her, vil Javascript ikke forstå koden og som følge heraf give en fejl meddelse og koden vil ikke kunne fortolkes.

Eksemplet i sin helhed kan f.eks se ud på denne måde, alt tekst der der står med fed skrift er kommentarer og har ingen betydning for selve koden.

<html>
   <head>
      <title>Vis og skjul layers</title>
      [b]<!--Her laves et stylesheet med nogle egenskaber for id'et layer-id-1-->[/b]
      <style type="text/css">
      #layer-id-1
      {
         position:absolute;
         top:190px;
         left:300px;
         visibility:hidden;
      }
      </style>
   </head>
   <body>
     [b]<!--Her indsættes et div tag med id'et layer-id-1-->[/b]
     <div id="layer-id-1">Tekst eller billede indhold</div>

     [b]<!--Her ændres egenskaben for id'ets visibility egenskab-->[/b]
     <a href="en-side.htm" onmouseover="document.getElementById('layer-id-1').style.visibility='visible'" 
     onmouseout="document.getElementById('layer-id-1').style.visibility='hidden'">
     Link tekst
     </a>
   </body>
</html> 

Resultatet af ovenstående kode vil være, at indholdet i div taget vil blive synligt når en bruger fører sin mus over link teksten og skjules igen når musen fjernes fra link teksten.
Selvom at koden her gør lige præcis det jeg er ude efter, er der dog et par problemer man skal være opmærksom på.

Problem nr. 1
koden vil IKKE virke i browseren Netscape før version 6.0, da den tilgår lag egenskaber med metoden document.layers og som følge her ikke kender metoden document.getElementById().

Problem nr. 2
koden vil heller ikke virke i browseren IE før version 5.0, da den tilgår lag egenskaber med metoden document.all og som følge her ikke kender metoden document.getElementById().

Man kan så sige, at de to problemer er til, at have med og gøre da det kun er ca. 2% af brugerne, der benytter de to browsere i de nævnte versioner. Men personligt syntes jeg, at det er at springe over hvor gærdet er lavest, hvis man ikke sørger for, at ens kode understøtter så mange browsere som muligt.

Problem nr. 3
Hvis man tænker på, at eksemplet fra før kun viser og skjuler et element og at man på en side, kan have mange forskellige elementer der skal vises og skjules, vil det blive et pænt stort taste arbejde, hvis man til hvert element skal skrive disse to linjer: document.getElementById('layer-id-1').style.visibility='visible' og document.getElementById('layer-id-1').style.visibility='hidden'.

Alle de tre nævnte problemer kan klares ved, at lave en Javascript funktion som kan teste hvilken browser der loader siden og ud fra denne oplysning give adgang til den metode som de enkelte browsere bruger til, at tilgå et elements lag egenskab.
Desuden giver en funktion også mulighed for, at genbruge koden og som følge heraf slipper man for, at indtaste den samme kode mere end en gang !

Til det afsluttende eksempel skal jeg bruge to Javascript funktioner. En funktion er viser et element og en der skjuler et element.

Når man laver en funktion skal man starte med, at erklærer funktionen med kodeordet function, derefter skal funktionen have et navn som efterfølges af et sæt parenteser. Koden der udføres af funktionen skal stå imellem et par krøllet parenteser { } også kaldet funktionens krop. Syntaksen i en Javascript funktion ser ud på denne måde:

function navn-på-funktion()
{
   koden står her
}

Jeg vil nu gå i gang med, at lave funktionen der skal vise elementerne. jeg har indsat nogle kommentarer i koden alle kommentarer står med fed skrift og funktionen vil blive gennemgået lige efter kode eksemplet.

[b]// funktionen til visning af et layer modtager parameteren layer_id[/b]
function show(layer_id)
{
   [b]// tilgår layer egenskaber for NN4 visibility sættes til show[/b]
   if (document.layers)
      document.layers[layer_id].visibility='show';

   [b]// tilgår layer egenskaber for IE4 visibility sættes til visible[/b]
   else if (document.all)
       document.all[layer_id].style.visibility='visible';

   [b]// tilgår layer egenskaber for IE5+, NN6+, Opera og Mozila visibility sættes til visible[/b]
   else
       document.getElementById(layer_id).style.visibility='visible';
}

Javascriptet startes med, at der erklæres en funktion med navnet show, i parentesen erklæres en parameter der hedder layer_id. Når funktionen så kaldes i en Javascript event kommer parameteren til, at indeholde værdien af det aktuelle id der sendes til funktionen i funktions kaldet.

Det næste der skal gøres er, at jeg skal teste hvilken browser der tilgår funktionen, til dette formål bruger jeg en "if, else if, else struktur". Strukturen skal forstås på denne måde:

Den sætning i strukturen der retunere sand (true) bliver udført

Det har den betydning, at hvis browseren er f.eks en NN4 browser vil denne linje være true:

if(document.layers) og koden i if sætningen vil blive udført.

Er browseren derimod en IE4 browser vil denne linje være true:

else if (document.all) og koden i else if sætningen vil blive udført.

Er browseren noget andet end de to nævnte vil koden i else sætningen vil blive udført.

Funktionen der skal skjule et element er næsten magen til show funktionen, de eneste forskelle er, at denne funktion hedder hide og visibility egenskaben ændres til hidden og hide for NN4.

[b]// funktionen til at skjule et layer modtager parameteren layer_id[/b]
function hide(layer_id)
{
   [b]// tilgår layer egenskaber for NN4 visibility sættes til hide[/b]
   if (document.layers)
      document.layers[layer_id].visibility='hide';

   [b]// tilgår layer egenskaber for IE4 visibility sættes til hidden[/b]
   else if (document.all)
       document.all[layer_id].style.visibility='hidden';

   [b]// tilgår layer egenskaber for IE5+, NN6+, Opera og Mozila visibility sættes til hidden[/b]
   else
       document.getElementById(layer_id).style.visibility='hidden';
}

Der er ingen grund til, at skrive så meget om denne funktion, på nær de før omtalte forskelle er de to funktioner identiske, bortset fra at i denne funktion skjules elementerne, sker der stort set det samme i de to funktioner.

Funktionerne benytter tre forskellige metoder til, at tilgå layer egenskaber document.layers til NN før version 6, document.all til IE4 og document.getElementById til IE5+, NN6+, Opera og Mozila. Alt efter hvilken af de forskellige browsere der tilgår de to funktioner, ændres visibility egenskabens værdier til, at vise eller skjule et layer henholdsvis visible og hidden til IE4, IE5+, NN6+, Opera og Mozila samt show og hide til NN før version 6.

Her tilsidst vil jeg vise det afsluttende eksempel i sin helhed. I eksemplet indgår der de to funktioner, et stylesheet der erklærer fire id'er, fire div tags der indeholder hvert sit id samt otte knapper der bruges til, at kalde de to funktioner i et onclick event.

<html>
   <head>
      <title>Vis og skjul layers</title>

      <script type="text/javascript">
      [b]// Her starter script koden[/b]
      [b]// funktionen til visning af et layer modtager parameteren layer_id[/b]
      function show(layer_id)
      {

         [b]// tilgår layer egenskaber for NN4 visibility sættes til show[/b]
         if (document.layers)
            document.layers[layer_id].visibility='show';

         [b]// tilgår layer egenskaber for IE4 visibility sættes til visible[/b]
         else if (document.all)
            document.all[layer_id].style.visibility='visible';

         [b]// tilgår layer egenskaber for IE5+, NN6+, Opera og Mozila  visibility sættes til visible[/b]
         else
            document.getElementById(layer_id).style.visibility='visible';
      }

      [b]// funktionen der skjuler et layer modtager parameteren layer_id[/b]
      function hide(layer_id)
      {
         [b]// tilgår layer egenskaber for NN4 visibility sættes til hide[/b]
         if (document.layers)
            document.layers[layer_id].visibility='hide';

         [b]// tilgår layer egenskaber for IE4 visibility sættes til hidden[/b]
         else if (document.all)
            document.all[layer_id].style.visibility='hidden';

         [b]// tilgår layer egenskaber for IE5+, NN6+, Opera og Mozila  visibility sættes til hidden[/b]
         else
            document.getElementById(layer_id).style.visibility='hidden';
      }

      [b]// Slut på scriptkode[/b]
      </script>

      <style type="text/css">
      [b]<!-- Her laves stylesheetet med de fire id'er, hvert id skal have et unikt navn -->[/b]
      [b]<!-- De fire id'er layer-id-1, layer-id-2, layer-id-3 og layer-id-4 -->[/b]

         #layer-id-1
         {
            position:absolute;
            top:190px;
            left:300px;
            visibility:hidden;
         }

         #layer-id-2
         {
            position:absolute;
            top:220px;
            left:300px;
            visibility:hidden;
         }

         #layer-id-3
         {
            position:absolute;
            top:250px;
            left:300px;
            visibility:hidden;
         }

         #layer-id-4
         {
            position:absolute;
            top:280px;
            left:300px;
            visibility:hidden;
         }  
      [b]<!-- Slut på stylesheetet -->[/b]
      </style>

   </head>
   <body>

      [b]<!-- Indsætter de fire id'er i hvert sit div tag -->[/b]
      <div id="layer-id-1">Indhold i layer 1</div>
      <div id="layer-id-2">Indhold i layer 2</div>
      <div id="layer-id-3">Indhold i layer 3</div>
      <div id="layer-id-4">Indhold i layer 4</div>

      [b]<!--Funktions kald i onclick event og knapper til at vise eller skjule et layer
      Parameterer overføres til show og hide funktionerne i form af et layer-id-->[/b] 
      <input type="button" onclick="show('layer-id-1')" value="Vis layer 1">
      <input type="button" onclick="hide('layer-id-1')" value="Skjul layer 1">

      <input type="button" onclick="show('layer-id-2')" value="Vis layer 2">
      <input type="button" onclick="hide('layer-id-2')" value="Skjul layer 2">

      <input type="button" onclick="show('layer-id-3')" value="Vis layer 3">
      <input type="button" onclick="hide('layer-id-3')" value="Skjul layer 3">

      <input type="button" onclick="show('layer-id-4')" value="Vis layer 4">
      <input type="button" onclick="hide('layer-id-4')" value="Skjul layer 4">

   </body>
</html>

Resultatet af koden vil være, at når en bruger klikker på en af knapperne vil der i onclick eventet ske et funktionskald, der vil så blive overført et id, til en af funktionerne i form af en parameter værdi.
Hvis der f.eks klikkes på den første knap, vil funktionskaldet hede show('layer-id-1').

Hvis f.eks den browser der kalder funktionen er en NN4 browser, vil kaldet af selve funktionen blive opfattet på denne måde:

Vis det element der har en id attribut der hedder layer-id-1

Den linje kode der udføres er denne: document.layers[layer_id].visibility='show'; men funktionen vil pga. af den overførte parameter værdi opfatte linjen som:

document.layers['layer-id-1'].visibility='show';

og derfor vise indholdet af div taget der indeholder id attributten layer-id-1. Hvis der var klikket på knap nr 3 ville linjen af funktionen opfattes som:

document.layers['layer-id-2'].visibility='show';

og derfor vise indholdet af div taget der indeholder id attributten layer-id-2. Det samme er tilfældet hvis det er hide funktionen der kaldes her skjules elementet i stedet for.

Det var alt i denne omgang, håber at der er nogen der kan bruge denne lidt lange smøre til noget.

Jeg vil meget gerne svare på kritik og eventuelle spørgsmål til denne artikel, hvis der skulle være noget sådan ;o)

MVH
Claus Pryds






Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X