Problematik
Texte enthalten manchmal landes- oder sprachtypische numerische Werte, die nicht allen Benutzern sofort vertraut sind. So können beispielsweise viele Deutsche ohne weiteres einen englischsprachigen Wetterbericht lesen, doch mit den Temperatur-Angaben in Fahrenheit können sie erst mal nichts anfangen. Als Anbieter solcher Web-Inhalte können Sie Ihren Usern mit ein wenig JavaScript-Unterstützung unter die Arme greifen. Nachfolgendes Beispiel zeigt, wie man Temperatur-Angaben mittels HTML so auszeichnen kann, dass onmouseover in einem Tooltipp-Popup der Umrechnungswert erscheint.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> .convert { text-decoration: underline; cursor: pointer; } </style> <script type="text/javascript"> function f2c(f) { c = (f - 32) * 5 / 9; c = parseInt(c * 10) / 10; return(c); } function c2f(c) { f = ((c * 9 ) / 5 ) + 32; f = parseInt(f * 10) / 10; return(f); } </script> </style> </head> <body> <p>Today's temperature is between <span title="" class="convert" onmouseover="this.title = f2c(this.innerHTML) + ' °C';">77</span> and <span title="" class="convert" onmouseover="this.title = f2c(this.innerHTML) + ' °C';">82</span> F.</p> <p>Das Thermometer erreicht heute Werte zwischen <span title="" class="convert" onmouseover="this.title = c2f(this.innerHTML) + ' F';">20</span> und <span title="" class="convert" onmouseover="this.title = c2f(this.innerHTML) + ' F';">23</span> °C.</p> </body> </html>
Erläuterung
Zunächst definieren wir uns eine zentrale CSS-Klasse für Elemente, mit denen wir die Temperaturwerte auszeichnen wollen. Im Beispiel ist das die Klasse convert. Elemente mit dieser Klasse werden ähnlich wie ein Link unterstrichen und mit verändertem Mauscursor dargestellt. So kann der Benutzer gleich sehen, dass ein Temperaturwert "interaktiv" ist.
In einem zentralen Scriptbereich werden zwei kleine JavaScript-Funktionen notiert. f2c() konvertiert eine Fahrenheit-Angabe in Celsius, und c2f() eine Celsius-Angabe in Fahrenheit. Übergeben wird jeweils der Temperaturwert. Zurückgegeben wird ebenfalls eine Zahl, die aber bis auf eine Stelle hinterm Komma genauer ist. Denn bei der Umrechnung können Bruchzahlen entstehen. Für die Umrechnung selber werden die Formeln (Fahrenheit - 32) * 5 / 9 bzw. ((Celsius * 9 ) / 5 ) + 32 angewendet. Die anschließende Multiplikation mit 10 und nachfolgende Division durch 10 liefert die um 1 erhöhte Nachkomma-Präzision.
Im HTML-Code zeichnen wir die reinen numerischen Werte der Temperaturangaben jeweils mit einem span-Element aus. Das Element erhält ein leeres title-Attribut und bekommt die CSS-Klasse convert zugewiesen. Die Umrechnung wird durch den Event-Handler onmouseover angestoßen. Dem Event-Handler wird ein JavaScript-Statement zugeordnet, welches das title-Attribut des aktuellen Elements (this.title) mit einem Wert versorgt. Der Wert ist der Rückgabewert des Aufrufs einer unserer Konvertierfunktionen. Als Wert wird den Funktionen jeweils this.innerHTML übergeben. Da die span-Elemente jeweils nur die numerischen Temperaturwerte umschließen, erhalten die Konvertierfunktionen einen gültigen Input. Dem Rückgabewert der Konvertierfunktionen wird außerdem noch durch Zeichenkettenverknüpfung die Temperatur-Bemaßungsangabe hinzugefügt. Fährt der Anwender also beispielsweise im Satz Today's temperature is between 77 and 82 F über die Zahl 82, erhält das title-Attribut des entsprechenden span-Elements den Wert "25 °C".