Voor gebruikers die tekst op je website misschien te klein vinden, kun je hun de mogelijkheid geven om via een klik op een link de gehele tekst op je website te vergroten.

HTML

In de <header>

<link rel="stylesheet" type="text/css" href="normaal.css" title="normaal">
<link rel="alternate stylesheet" type="text/css" href="groter.css" title="groter">
<link rel="alternate stylesheet" type="text/css" href="giga.css" title="gigant">
<script type="text/javascript" src="styleswitcher.js"></script>

Style Switcher links

<a title="normaal" onclick="setActiveStyleSheet('normaal'); return false;" href="#">a</a>
<a title="groter" onclick="setActiveStyleSheet('groter'); return false;" href="#">A</a>
<a title="gigantisch" onclick="setActiveStyleSheet('gigant'); return false;" href="#">A+</a>

JavaScript

styleswitcher.js

<![CDATA[
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;
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
]]>

CSS

Normaal

body {
font-size : 1.5em;
background-color : #CCCC33;
}

Groter

body {
font-size : 1.8em;
background-color : #99CC66;
}

Giga

body {
font-size : 2.3em;
background-color : #99CC66;
}