Bildbeschriftung mit jQuery

Dafür das es gar nicht lange gedauert hat, ist das Ergebnis schon recht ansehnlich: Die Bilder in diesem unglaublich belanglosen Blog sind nun auch mit einer tollen Beschriftung versehen. Aber nur, wenn man mit der Maus darüber fährt.

Realisiert habe ich das mit Hilfe von ein wenig jQuery, HTML und CSS. Bevor nach dem Klick ein paar Code-Schnippsel kommen, hier ein Anwendungsbeispiel:

Die Beschriftung dieses Bildes lautet <em>Blaues Fahrrad</em>.<br>Und das alles, ohne beim Schreiben des Eintrages viel Aufwand zu haben.

Um eine Beschriftung zu bekommen, muss man beim Einfügen des Bildes in WordPress das Feld “Titel” ausfüllen. Auch HTML-Tags inklusive eines Zeilenumbruchs sind hier erlaubt. Zwei Zeilen fasst meine Anzeige.

Folgender jQuery-Code liest beim Überfahren eines Bildes das title-Attribut eines img-Tags aus, das die Klasse size-full hat. Das sind hier im Blog alle Bilder, die über die volle Breite des Inhaltsbereiches gehen. Der ausgelesene Text wird in einer Variable gespeichert (Bis hier hin: Zeile 2). Sofern diese nicht leer ist (also kein Titel vergeben ist) (das steht in Zeile 3), wird der Text dann in einem HTML-Container mit der Klasse imagetitle hinter dem Bild ausgegeben (Zeile 5). Außerdem wird das title-Attribut leer gemacht, damit kein Tooltip mehr erscheint (Zeile 4). Zuerst ist der Container noch unsichtbar, wird dann aber direkt auch hübsch langsam eingeblendet (Zeile 7). Der Code in Zeile 10 lässt den Container wieder verschwinden, wenn der Mauszeiger das Bild verlässt.

	$(".size-full").hover(function(){
			var title = $(this).attr("title");
			if (title != "") {
				$(this).removeAttr("title");					
				$(this).after('<div class="imagetitle">' + title + '</div>');
			}
			$(this).next(".imagetitle").stop(true, true).fadeIn();
		},
		function(){
			$(this).next(".imagetitle").stop(true, true).fadeOut();
	});

Folgender CSS-Code war dann auch noch notwendig. Hier gibt es eigentlich nicht viel dazu zu sagen. Es war ein wenig Spielerei notwendig, bis ich die richtigen Werte zur Positionierung raus hatte.

.imagetitle{
		display: none; //Der Container ist erst einmal unsichtbar.
		width: 580px; //Breite und Padding ergeben 600px.
		padding: 10px;
		height: 34px;
		background: url("images/bg_imagetitle.png") transparent; //Hintergrundbild.
		color: #fff; //Der Text über dem Bild soll weiß sein.
		position: relative; //Der Container soll relativ positioniert werden.
		bottom: 70px; //Um so viele Pixel wird der Container nach oben verschoben. 
		margin: 0 0 -54px 0; //Negatives Margin unten, damit der Platz freigegeben wird.
		line-height: 17px; //Hälfte von height, damit der Container immer gleich hoch ist.
		}

So ganz perfekt ist die Geschichte noch nicht: Im Internet Explorer 7 wird die Beschriftung ein paar Pixel zu hoch gerendert. Außerdem flackert die Beschriftung bei mir in allen Browsern, wenn man den Mauszeiger über ihr bewegt. Ersteres ist sicherlich nur eine Anpassungssache des CSS-Codes, beim zweiten Problem bin ich für jeden Tipp dankbar, da stehe ich ein wenig auf dem Schlauch. Für einen Schnellschuss von nicht einmal zwei Stunden bin ich aber sehr zufrieden.

Fragen zur Anpassung an eigene Wünsche darf man gerne in den Kommentaren stellen.

7 Kommentare zu Bildbeschriftung mit jQuery

  1. Ehrlich, ich wollt gestern schon fragen, denn auf einmal war das MouseOver da. Schick. Nur eins noch zum besseren Verständnis. Die Bilder hier sind nicht aus Flickr hier eingebunden, oder?

  2. Vylübb: Die Bilder habe ich parallel auch nach flickr geschickt. Allerdings liegen die Bilder für diese Seite auch auf meinem Server. Da ich keinen Pro-Account bei flickr habe, würden die Bilder im Laufe der Zeit zu weit nach hinten rutschen und würden nicht mehr angezeigt. Die haben da irgend ein Limit drin. Außerdem lösche ich bei flickr hin und wieder auch wieder Bilder, da wäre es blöd wenn hier dann auf einmal eine Fehlermeldung auftauchen würde.

  3. Ben: Das ist ja schon alles fertig! Schade. Aber vielleicht kann ich mir im Code noch was abschauen um mein Problem zu lösen. Der Ansatz ist aber ein ganz anderer.
    Grundsätzlich baue ich solche Sachen aber total gerne selbst. Da lernt man was bei und kann seine eigenen Vorstellungen umsetzen.

CC-BY-SA