Stilark-eksempel

Med stilark kan dine besøgende nemt skifte mellem forskellige layout af siden, og du kan nemt selv lave et nyt layout, når du er blevet træt af det gamle.

Moderne browsere giver dig mulighed for at skifte mellem forskellige layout via menusystemet. For eksempel kan du i Firefox klikke på menupunktet Vis, klik derefter på Stilark, og du vil få en oversigt over de stilark, som siden tilbyder.

Men der findes ikke en tilsvarende funktionalitet i Internet Explorer 6.0, så hvis besøgende med Internet Explorer skal have glæde af et alternativt layout, skal du benytte JavaScript til at lave en skift layout-funktion. Det er desuden muligt at indbygge en cookie-funktion i JavaScriptet, så den besøgendes valg huskes næste gang, han besøger siden.

Layout-link: Alternativt udseende
Bemærk, at det er muligt at skjule dele af siden, for eksempel er logoet og "reklamen" væk. Og bruger du en nyere browser, vil menulinjen øverst på siden blive på sin plads. Desuden har billedet fået en anden placering.

Layout-link: Almindeligt udseende.

Kode til layout-skift

Koden til layout-skift består af tre dele. Du skal angive stilark, du skal placere et JavaScript i sidens header, og du skal bruge lidt JavaScript i forbindelse med linket til at skifte layout.

Følgende angiver navnene på stilarkene og skal indsættes i headeren, altså før body-taggen. Her er brugt 2 stilark, almindelig og alternativ - men det er selvfølgelig muligt at benytte flere, de skal bare have hver deres entydige navn, som skal angives i title-parameteren.


<link rel="stylesheet" type="text/css" href="style/ludvigs.css" title="almindelig">
<link rel="alternate stylesheet" type="text/css" href="style/ludvigs-alternativ.css" title="alternativ">

Nedenstående JavaScript skal også indsættes i headeren. Bemærk, at dette JavaScript ikke benytter en cookie til at huske brugerens valg. Brugeren vil derfor altid få vist det almindelige layout, indtil han klikker på linket til det alternative layout.

<script type="text/javascript">

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
setActiveStyleSheet(title);

</script>

Linket skal laves med nedenstående kode. I parantesen skal angives navnet på det ønskede stilark - altså samme navn som du har angivet i title-parameteren til de enkelte stilark.


<a href="#" onclick="setActiveStyleSheet('alternativ'); return false;">Alternativt udseende</a>

Til toppen