200922Dez

Captify: Interaktive Bildunterschriften mit jQuery

Bilder stellen ein wichtiges Element einer Website dar. Die Einsatzgebiete sind vielfältig und bei der Gestaltung der Bilderwelt sollte die Art der Präsentation im Vordergrund stehen. Bildunterschriften oder Bildtitel sind in manchen Fällen erforderlich und können dazu dienen, Erklärungen oder zusätzliche Informationen zu einem Bild zu transportieren.
Mit dem jQuery-Plugin "Captify" ist es möglich, interaktive Untertitel für Bildelemente zu erstellen. Der Titel wird bei einem MouseOver-Ereignis eingeblendet und wird somit nur angezeigt, wenn der Benutzer es möchte. Das folgende Artikelbild stellt eine Demonstration von Captify dar (Mauszeiger über Bild bewegen).

Bildunterschrift mit Captify

Ähnlich wie bei Meerkat wird eine Fläche per "Slide" eingeblendet, die mit CSS definiert wurde. Als Text für die Bildunterschrift dient das alt-Attribut des Bildelements.

Captify funktioniert bei img-Elementen und wird aufgerufen wie folgt:

  • $("element").captify({});

Auf der Website des Autors finden sich die verfügbaren Optionen und Einstellungen des Plugins. Bei der Verwendung von Captify muss ein kleiner Teil CSS-Code in das bestehende Stylesheet eingefügt werden, durch den das Aussehen der Fläche festgelegt wird.
Die jQuery-Erweiterung arbeitet auch unter Internet Explorer 6 und ist schlanke 2,3 KB groß.

UPDATE
Das Projekt wurde inzwischen eingestellt und steht leider nicht mehr zur Verfügung.

RSS-Feed abonnieren

Kommentare

J. Kruggel schrieb am 22.12.2009 #1

Hallo Herr Schütz,
leider ist kein Beispielbild zu sehen (FF3.5.6, Mac) und somit leider auch kein Slideeffekt. Der Link oben drüber zu Captify funktioniert aber, auch das Beispiel dort. Schicke Sache.

Matthias schrieb am 22.12.2009 #2

Seltsam. Ich habe mir diese Seite noch einmal unter Mac OS X und Firefox 3.5.6 / Safari 4 angesehen und es funktioniert. Wenn kein Bild zu sehen ist, liegt es allerdings nicht an dem Skript. Ich werde meine CMS-Konfiguration überprüfen..