Tooltipps mit Javascript
Versteckte Infos

Zusatzinfos

Tooltipps mit Javascript

Auf voll gepackten Webseiten bleibt oft wenig Platz für Informationen, die einem Besucher sagen, was sich bei einem Link an Neuem ereignet und wohin ihn ein Klick darauf genau führt. Auch bei Bildern fehlen oft nützliche Zusatzinformationen.
Gutes Webdesign wäre es sicher, auf dicht gepackte Seiten ganz zu verzichten. Doch ein Blick auf große Portalseiten wie T-Online, AOL oder Freenet zeigt, dass der Trend eher in die andere Richtung geht.

Tootipp-Skript

Tooltipps mit Javascript

Man kann den Informationsmangel, der damit verbunden ist, jedoch mildern, indem man mit so genannten Tooltipps arbeitet. Microsoft hat die Technik bei seinen Betriebssystem-Oberflächen und seinen Office-Programmen schon mit einigem Erfolg eingesetzt. Wo immer man zum Beispiel bei Windows XP, Word, Powerpoint oder Excel den Mauszeiger hinbewegt, tauchen die nützlichen Mini-Fensterchen mit ergänzenden Informationen auf. Diese benutzerfreundliche Technik lässt sich ohne Probleme auch auf beim Design von Webseiten einsetzen.

Man kann diese Informationsdefizite teilweise mildern, indem man das HTML-Instrumentarium voll ausschöpft. Mit den Attributen alt und title kann man dafür sorgen, dass Zusatzinformationen eingeblendet werden, wenn der Surfer seine Maus über den Link beziehungsweise das Bild bewegt. Auch mit Hilfe von CSS lassen sich Links informativer gestalten. Am elegantesten lässt sich das Problem jedoch mit Javascript und der onMouseOver-Methode lösen.

Dank eines fertigen Javascripts aus der Feder von Walter Zorn (www.walterzorn.de), das sich auf der Heft-CD befindet, steht auch schon ein funktionierendes Grundgerüst zur Verfügung, mit dem sich solche Tooltipps mit überschaubarem Aufwand in eine Seite integrieren lassen. Überflüssige Code-Fummelei kann man sich dank dieses Skripts ersparen.

Skript in die Seite einbinden

Tooltipps mit Javascript

Laden Sie sich das Skript von der Heft-CD und übertragen Sie es nach dem Entpacken auf den Webspace, auf dem Sie es nutzen wollen. Auf jede Seite, auf der Sie damit Tooltipps platzieren wollen, müssen Sie es im body-Bereich integrieren. Zum Beispiel so:

Aktiviert wird ein Tooltipp dadurch, dass Sie das entsprechende Tag durch ein onmouseover-Attribut ergänzen, das die Anzeigefunktion für den Tooltipp aufruft. Als zusätzlichen Parameter müssen Sie noch den Inhalt des Tooltipps mit übergeben. Das kann zum Beispiel so aussehen:


"return escape('Irgendein Text')">
Zur Startseite