nicht angemeldet
Lieber coder1979,
<select onchange="changeLang(this.value);"> <option value="">Bitte wählen</option> <option value="0">Deutsch</option> <option value="1">Englisch</option> <option value="2">Spanisch</option> </select>
also ich würde da Radio-Buttons verwenden. Im <label>-Text würde ich die spracheigene Version notieren:
<ul id="lang-select">
<li>
<label for="de">
<input id="de" name="lang" type="radio" value="de" checked>
Deutsch
</label>
</li>
<li>
<label for="en">
<input id="en" name="lang" type="radio" value="en">
English
</label>
</li>
<li>
<label for="es">
<input id="es" name="lang" type="radio" value="es">
Español
</label>
</li>
</ul>
Das onchange-Attribut in HTML würde ich durch einen Aufruf von addEventListener() in JavaScript ersetzen.
Es kann reizvoll sein, die Textbausteine in einer JSON-Datei vorzuhalten, die von JavaScript geladen wird. Man kann natürlich auch alles gleich zusammen in das HTML-Dokument werfen, wenn man das kompakt in einer Datei ausliefern muss:
{
"links-and-layout-remain-intact": {
"de": "Links und Layout bleiben erhalten",
"en": "Links and layout are preserved",
"es": "Se conservan los enlaces y el diseño."
},
"welcome": {
"de": "Herzlich Willkommen!",
"en": "Warm Welcome!",
"es": "¡Cálida bienvenida!"
}
}
Hier wird einem Schlüssel ein Objekt zugewiesen, welches für jede der Sprachen eine eigene Eigenschaft hat - der Text in der jeweiligen Landessprache. Sollte einmal eine Sprache zu einem Schlüssel fehlen, kann die Übersetzungsfunktion (oder -methode) eine Default-Sprache als Ersatz wählen - oder den Schlüssel selbst als Notlösung verwenden.
Die Textbausteine können via JavaScript als textContent-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wir data-i18n (ein data-Attribut):
<h1 data-i18n="welcome"></h1>
<p class="notice" data-i18n="links-and-layout-remain-intact"></p>
Mittels JavaScript nimmt man den Attributwert des lang-Attributs des <html>-Elements und findet nun die passende Sprachversion für den Schlüssel aus dem data-i18n-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in die textContent-Eigenschaft des H1-Elementobjektes.
Auf diese Weise kann man live sofort alle Textbausteine in einer anderen Sprache anzeigen lassen, also sprichwörtlich onchange beim jeweiligen Radio-Button.
[Edit]Ich habe so etwas schon mal verwendet.[/Edit]
Liebe Grüße
Felix Riesterer
Der Martin
Gunnar Bittersmann
Auge