Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS-Tooltips erstellen: Ballon-Quickinfos/balloon pop-ups

Posted by sura1 - 27. Juli 2008

Bookmark and Share

Ballon-Quickinfos / balloon pop-ups

Tooltips werden zum Beispiel in Browsern zur Beschreibung von Links und Screenshots verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt. Eine QuickInfo kann eine oder mehrere Textzeilen, Bilder, Links oder andere Inhalte enthalten.

Wenn nun ein Benutzer in meinem Beispiel den Mauszeiger über die Screenshots bewegt,  erscheint ein Ballon-Popup mit weiterführenden Informationen. Sie erhalten eine Kurzbeschreibung der Webseite, außerdem gibt es in jeder Ballon-Quickinfo 3 Links und Sie gelangen mit diesen direkt auf die Homepage des jeweiligen Anbieters.

Die Balloon-Pop-ups sind eine Bearbeitung der Arbeiten von Stu Nicholls von CSSplay. Sie finden das Original auf der Webseite www.cssplay.co.uk/menu/balloons

Meine Variante sieht folgendermaßen aus:

Bitte auf die Grafik klicken oder das Beispiel hier(!!) ansehen

Für nähere Informationen und zur Bearbeitung:

alle Beispieldateien (html, css, grafiken): 129KB zip-File

(Download-Button oder Link anklicken!)

Vielleicht werden Sie sich fragen, wofür man solche Ballon-Popups überhaupt brauchen kann. In erster Linie sind diese wohl erstellt worden, um zu zeigen, dass man auch ohne JavaScript ansprechende CSS-Tooltips errichten kann.

Für mein konkretes Beispiel könnte ich mir  vorstellen, die Ballon-Popups in einer LINKLISTE einzubauen.

Ich erspare mir dadurch die monotone Auflistung der Links (Zeilenform); natürlich sollten in diesem Falle vielleicht die Screenshots ein wenig kleiner ausfallen, damit bei einer längeren Linkliste die Webseite nicht zu grafiklastig wird.
Schreiben Sie mir Ihre Meinung dazu; womöglich haben Sie andere interessante Vorschläge, wo man Ballon-Quickinfos sinnvoll einsetzen könnte.

Auf CSSPlay gibt es noch 2 weitere Beispiele, die Sie bei Interesse ansehen sollten:

Klicken Sie auf die Screenshots – Sie gelangen damit direkt zu den Beispielen auf CSSPlay.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: