Text beim Klick (mehrmals!) ändern

[Max Mustermann]

Hallo!

Meine Website hat eine russische Deklinationstabelle zu bieten, die zurzeit so aufgebaut ist, dass die Wörter zunächst in kyrillischer Schrift erscheinen, beim Klicken aber in der ISO-Transliteration. Dies habe ich mit onclick="this.firstChild.nodeValue = 'XY'" hinbekommen.

Nun möchte ich aber auch, dass nach dem _zweiten_ Klick die deutsche Transkription angezeigt wird. Außerdem möchte ich ein paar Formatierungen bei dem erscheinenden Text vornehmen, was damit leider nicht möglich ist.

Hat jemand Vorschläge für mich?

Vielen Dank!

[Matthias Apsel]

Om nah hoo pez nyeetz, Max Mustermann!

Außerdem möchte ich ein paar Formatierungen bei dem erscheinenden Text vornehmen, was damit leider nicht möglich ist.

Formatierungen beeinflusst du, indem du die Klassenzugehörigkeit der entsprechenden Elemente änderst.

Matthias

[Gunnar Bittersmann]

@@Max Mustermann:

nuqneH

Meine Website hat eine russische Deklinationstabelle zu bieten, die zurzeit so aufgebaut ist, dass die Wörter zunächst in kyrillischer Schrift erscheinen, beim Klicken aber in der ISO-Transliteration. Dies habe ich mit onclick="this.firstChild.nodeValue = 'XY'" hinbekommen.

Hm, vermutlich schlecht. Du pflegst die Texte an unterschiedlichen Stellen? Die in kyrillischer Schrift im HTML und die in lateinischer Schrift in JavaScript? Ungünstig.

Besser so:

<span lang="ru" class="Cyrl">язык</span>  
<span lang="ru-Latn" class="Latn-transliteration">âzyk</span>  
<span lang="ru-Latn" class="Latn-transcription-de">jasyk</span>

Ohne JavaScript lässt du alles anzeigen. Mit JavaScript setzt du eine Klasse fürs 'html'-Element

document.documentElement.className += " js";

und blendest initial die Umschreibungen mit lateinischen Buchstaben aus:

.js .Latn-transliteration, .js .Latn-transcription-de { display: none }

Mit JavaScript setzt du auf die Clicks bei einem geeigneten Element (das könnte dein 'table'-Element sein oder 'body' eine Klasse:

document.body.className = (document.body.className != "show-Latn-transliteration" ? "show-Latn-transliteration" : "show-Latn-transcription-de";

Nun möchte ich aber auch, dass nach dem _zweiten_ Klick die deutsche Transkription angezeigt wird.

Das erledigt obige Zeile gleich mit.

Im Stylesheet steht dazu noch:

.js .show-Latn-transliteration .Cyrl, .js .show-Latn-transcription-de .Cyrl { display: none }  
.js .show-Latn-transliteration .Latn-transliteration, .js .show-Latn-transcription-de .Latn-transcription-de { display: inline }

Außerdem möchte ich ein paar Formatierungen bei dem erscheinenden Text vornehmen, was damit leider nicht möglich ist.

Damit schon.

Qapla'

[Max Mustermann]

@@Max Mustermann:

nuqneH

Meine Website hat eine russische Deklinationstabelle zu bieten, die zurzeit so aufgebaut ist, dass die Wörter zunächst in kyrillischer Schrift erscheinen, beim Klicken aber in der ISO-Transliteration. Dies habe ich mit onclick="this.firstChild.nodeValue = 'XY'" hinbekommen.

Hm, vermutlich schlecht. Du pflegst die Texte an unterschiedlichen Stellen? Die in kyrillischer Schrift im HTML und die in lateinischer Schrift in JavaScript? Ungünstig.

Besser so:

<span lang="ru" class="Cyrl">язык</span>

<span lang="ru-Latn" class="Latn-transliteration">âzyk</span>
<span lang="ru-Latn" class="Latn-transcription-de">jasyk</span>

>   
> Ohne JavaScript lässt du alles anzeigen. Mit JavaScript setzt du eine Klasse fürs 'html'-Element  
>   
> `document.documentElement.className += " js";`{:.language-javascript}  
>   
> und blendest initial die Umschreibungen mit lateinischen Buchstaben aus:  
>   
> `.js .Latn-transliteration, .js .Latn-transcription-de { display: none }`{:.language-css}  
>   
>   
>   
>   
> Mit JavaScript setzt du auf die Clicks bei einem geeigneten Element (das könnte dein 'table'-Element sein oder 'body' eine Klasse:  
>   
> `document.body.className = (document.body.className != "show-Latn-transliteration" ? "show-Latn-transliteration" : "show-Latn-transcription-de";`{:.language-javascript}  
>   
>   
> > Nun möchte ich aber auch, dass nach dem \_zweiten\_ Klick die deutsche Transkription angezeigt wird.  
>   
> Das erledigt obige Zeile gleich mit.  
>   
> Im Stylesheet steht dazu noch:  
>   
> ~~~css

.js .show-Latn-transliteration .Cyrl, .js .show-Latn-transcription-de .Cyrl { display: none }  

> .js .show-Latn-transliteration .Latn-transliteration, .js .show-Latn-transcription-de .Latn-transcription-de { display: inline }

Außerdem möchte ich ein paar Formatierungen bei dem erscheinenden Text vornehmen, was damit leider nicht möglich ist.

Damit schon.

Qapla'

Bitte verzeihe mir mein Unwissen, aber wo genau kommt was hin? Kommt der ganze Javascript-Teil in den <script>-Bereich oder muss auch etwas in die Tabelle? Kannst du das nicht lieber in dem Schema darstellen:

  
<style type="text/css">  
XY  
</style>  
<script type="text/javascript">  
XY  
</script>  
<table>  
<tr>  
<td>(язык, âzyk, jasyk)</td>  
</tr>  
</table>  

Danke!

[Matthias Apsel]

Om nah hoo pez nyeetz, Max Mustermann!

Bitte verzeihe mir mein Unwissen, aber wo genau kommt was hin?

#1# Es ist unnötig, das ganze Posting zu zitieren, zumal du eigentlich überhaupt nicht darauf eingehst.

#2# Wie ist es denn um deine Grundlagen bestellt?

#3# Was ist in Gunnars Posting JS, was HTML, was CSS?

Matthias

[MM]

Om nah hoo pez nyeetz, Max Mustermann!

Bitte verzeihe mir mein Unwissen, aber wo genau kommt was hin?

#1# Es ist unnötig, das ganze Posting zu zitieren, zumal du eigentlich überhaupt nicht darauf eingehst.

Wie kommst du darauf?

#2# Wie ist es denn um deine Grundlagen bestellt?

Ich habe eigentlich keine Ahnung von Javascript, CSS und HTML kann ich gut verstehen.

#3# Was ist in Gunnars Posting JS, was HTML, was CSS?

Das weiß ich, aber mir hilft es nicht weiter, da ich Javascript auch in ein HTML-Tag einbauen kann.

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

<span lang="ru" class="Cyrl">язык</span>

<span lang="ru-Latn" class="Latn-transliteration">âzyk</span>
<span lang="ru-Latn" class="Latn-transcription-de">jasyk</span>

  
Man könnte auch die Schrift-Information mit in die Sprachkennzeichnungen mit hineinnehmen  
  
~~~html
<span lang="ru-Cyrl">язык</span>  
<span lang="ru-Latn-x-transliteration">âzyk</span>  
<span lang="ru-Latn-x-transcription-de">jasyk</span>

und die Pseudoklasse :lang() zum Stylen verwenden. Allerdings kennt der IE diese erst ab Version 8.

Ohne JavaScript lässt du alles anzeigen.

Will man das wirklich? Vielleicht ist es in dem Fall besser, nur die Wörter in kyrillischer Schrift anzuzeigen und auf das Gimmick von Transliteration und Transkription zu verzichten.

Qapla'

[Gunnar Bittersmann]

@@Max Mustermann:

nuqneH

beim Klicken aber in der ISO-Transliteration.

Beim Klicken worauf? Willst du einen Button, der die Anzeige

Nominativ язык
Genitiv языка

ändert in

Nominativ âzyk
Genitiv âzyka

oder soll beim Klcik auf ein Wort (bspw. язык) nur dieses in lateinischer Transliteration angezeigt werden?

Nominativ âzyk
Genitiv языка

Qapla'

PS: Wer braucht bei einer Deklinationstabelle eine Transliteration? Wenn die Russischkenntnisse schon so weit fortgeschritten sind, sollte man schon kyrillische Schrift lesen können.

[Max Mustermann]

@@Max Mustermann:
oder soll beim Klcik auf ein Wort (bspw. язык) nur dieses in lateinischer Transliteration angezeigt werden?

Genau!

PS: Wer braucht bei einer Deklinationstabelle eine Transliteration? Wenn die Russischkenntnisse schon so weit fortgeschritten sind, sollte man schon kyrillische Schrift lesen können.

Zum Lesen einer Deklinationstabelle braucht man doch keine Russischkenntnisse, vielmehr erhält man sie dadurch.

[Gunnar Bittersmann]

@@Max Mustermann:

nuqneH

oder soll beim Klcik auf ein Wort (bspw. язык) nur dieses in lateinischer Transliteration angezeigt werden?

Genau!

Hm, ich habe Zweifel an der Sinnhaftigkeit des Unterfangens.

Warum gibst du die Umschriften nicht einfach im Tooltip an?

<span lang="ru" title="âzyk – jasyk">язык</span>

Qapla'

[MM]

@@Max Mustermann:

nuqneH

oder soll beim Klcik auf ein Wort (bspw. язык) nur dieses in lateinischer Transliteration angezeigt werden?

Genau!

Hm, ich habe Zweifel an der Sinnhaftigkeit des Unterfangens.

Warum gibst du die Umschriften nicht einfach im Tooltip an?

<span lang="ru" title="âzyk – jasyk">язык</span>

Qapla'

Da hast du Recht, das ist sinnvoller.

Danke!