Weboldal készítés

Elérhető nyelv kiválasztó

2006-08-15

A többnyelvű honlapokon szinte mindig van egy ilyen kis zászlócskás nyelvválasztó az oldalon. Ha grafikailag rendben is vannak, egy probléma gyakori: nem elérhetőek.. Úgyértem: vagy a képeknek nincs alt attribútuma (nesze neked Lynx és társai), vagy pedig mivel csak képek vannak egymás mellé pakolva a kódban, a szemantika kifogásolható. készítettem egy megoldást, amivel szerintem ez elég jól kiküszöbölhető.

Na lássuk:

Először is oldjuk meg az egészet úgy, mintha egy normális select-et készítenénk:

<form id="SelectLanguage" name="SelectLanguage" action="index.php" method="post">
<select id="language" name="language">
<option value="hu" xml:lang="hu-hu" selected="selected">Magyar</option>
<option value="en" xml:lang="en-uk">English</option>
<option value="de" xml:lang="de-de">Deutsch</option>
</select>
<input type="submit" id="submit" name="submit" xml:lang="en-uk" value="Change language"/>
</form>

Elemezzük csak egy kicsit a kódot: a SelectLanguage nevű formot használjuk terveink megvalósítására, amely postolni fogyja magát az index.php-nak. A lényeg a language id-jü select. Minden egyes option értéke az adott nyelv kódja, bár még másra is fogjuk használni. Az xml:lang-nál megadtam a nyelvet, hogy a felolvasó lehetőleg jól olvassa fel.
Most egy kis css, hogy js nélkül is kinézzen valahogy:

form#SelectLanguage {
        margin: 0;
	padding: 0;
	display: inline;
}

Ezzel el is intéztük a formunkat. Jöhet az érdekesebb rész, persze hogy javascriptben. Kezdjük egy segédfüggvénnyel, amivel eseménykezelőt fogunk majd készíteni:

function addEventHandler(obj, eventType, handler) {
  if (obj.addEventListener) {
    obj.addEventListener(eventType, handler, true);
    return true;
  } else if (obj.attachEvent) {
    var r = obj.attachEvent("on"+eventType, handler);
    return r;
  } else {
    return false;
  }
}

A képekből álló választóhoz nyilván kell pár zászlócska. Ezeket Google-lal találtam és a tárhelyemre felraktam:

http://kris7topherx.extra.hu/accessiblelangsel/hu.gif
http://kris7topherx.extra.hu/accessiblelangsel/en.gif
http://kris7topherx.extra.hu/accessiblelangsel/de.gif

Azt a megoldást választottam, hogy JS-sel generálom le a képeket, szigorúan DOM-mal:

function SelectLanguageInit() {
  form = document.getElementById("SelectLanguage");
  // form elrejtése
  form.language.style.display = "none";
  form.submit.style.display = "none";
  // egy tároló elem
  container = document.createElement("SPAN");
  form.appendChild(container);
  for (i = 0; i <= form.language.options.length - 1; i++) {
    // új kép
		img = document.createElement("IMG");
		img.src = form.language.options[i].value + ".gif";
		img.title = form.language.options[i].innerHTML;
		img.alt = form.language.options[i].innerHTML;
		if (form.language.options[i].selected) {
		  // ha kiválasztott, jelöljük
			img.className = "current";
    } else {
		  // ha nem, kattinthatóvá tesszük
			addEventHandler(img, "click", SelectLanguageClick);
    }
		container.appendChild(img);
  }
}

A kattintás kezelő pedig így néz ki:

function SelectLanguageClick() {
  form = document.getElementById("SelectLanguage");
	// megkeressük, hogy melyik
	for (i = 0; i <= form.language.options.length - 1; i++) {
		if (this.src.indexOf(form.language.options[i].value + ".gif") > -1) {
		  // és mehet az űrlap
			form.language.selectedIndex = i;
		  form.submit.click();
		  break;
    }
  }
}

Formázzuk meg egy kicsit CSS-szel is. Nem fűznék hozzá sok magyarázatot, azthiszem hogy érthető:

form#selectLanguage img {
  padding: 0 2px 0 2px;
  cursor: pointer;
}
 
form#selectLanguage img:hover {
  background-color: #ddf;
}
 
form#selectLanguage img.current {
  background-color: #ccc;
  cursor: default;
}

Természetesen az Internet Explorer itt sem válik be. A gombokra kattintást nem érzékeli, mert az eseménykezelőt appendChild-del beszúrt objektumokra DOM-mal nem fogadja el. Ahhoz, hogy működjön, még két plusz függvény is kell. Nem szép, de hatékony:

function SelectLanguageInitIE() {
  form = document.getElementById("SelectLanguage");
  form.language.style.display = "none";
  form.submit.style.display = "none";
  container = document.createElement("SPAN");
  form.appendChild(container);
  for (i = 0; i <= form.language.options.length - 1; i++) {
    img = "<img src=\"";
    img += form.language.options[i].value + ".gif";
    img += "\" alt=\"";
    img += form.language.options[i].innerHTML;
		if (form.language.options[i].selected) {
		  img += "\" class=\"current\"";
		} else {
		  img += "\" onClick=\"SelectLanguageClickIE(" + i + ")\"";
    }
		img += " />";
		container.innerHTML += img; 
		img = document.createElement("IMG");
  }
}
 
function SelectLanguageClickIE(i) {
  form = document.getElementById("SelectLanguage");
  form.language.selectedIndex = i;
  form.submit.click();
}