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:

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.