Bildbeschriftung mit jQuery

Dafür das es gar nicht lange gedau­ert hat, ist das Ergeb­nis schon recht ansehn­lich: Die Bil­der in die­sem unglaub­lich belang­lo­sen Blog sind nun auch mit einer tol­len Beschrif­tung ver­se­hen. Aber nur, wenn man mit der Maus dar­über fährt.

Rea­li­siert habe ich das mit Hilfe von ein wenig jQuery, HTML und CSS. Bevor nach dem Klick ein paar Code-Schnippsel kom­men, hier ein Anwendungsbeispiel:

Um eine Beschrif­tung zu bekom­men, muss man beim Ein­fü­gen des Bil­des in Word­Press das Feld „Titel“ aus­fül­len. Auch HTML-Tags inklu­sive eines Zei­len­um­bruchs sind hier erlaubt. Zwei Zei­len fasst meine Anzeige.

Fol­gen­der jQuery-Code liest beim Über­fah­ren eines Bil­des das title–Attri­but eines img–Tags aus, das die Klasse size-full hat. Das sind hier im Blog alle Bil­der, die über die volle Breite des Inhalts­be­rei­ches gehen. Der aus­ge­le­sene Text wird in einer Varia­ble gespei­chert (Bis hier hin: Zeile 2). Sofern diese nicht leer ist (also kein Titel ver­ge­ben ist) (das steht in Zeile 3), wird der Text dann in einem HTML-Container mit der Klasse image­title hin­ter dem Bild aus­ge­ge­ben (Zeile 5). Außer­dem wird das title–Attri­but leer gemacht, damit kein Tool­tip mehr erscheint (Zeile 4). Zuerst ist der Con­tai­ner noch unsicht­bar, wird dann aber direkt auch hübsch lang­sam ein­ge­blen­det (Zeile 7). Der Code in Zeile 10 lässt den Con­tai­ner wie­der ver­schwin­den, wenn der Maus­zei­ger 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();
	});

Fol­gen­der CSS-Code war dann auch noch not­wen­dig. Hier gibt es eigent­lich nicht viel dazu zu sagen. Es war ein wenig Spie­le­rei not­wen­dig, bis ich die rich­ti­gen Werte zur Posi­tio­nie­rung 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 per­fekt ist die Geschichte noch nicht: Im Inter­net Explo­rer 7 wird die Beschrif­tung ein paar Pixel zu hoch geren­dert. Außer­dem fla­ckert die Beschrif­tung bei mir in allen Brow­sern, wenn man den Maus­zei­ger über ihr bewegt. Ers­te­res ist sicher­lich nur eine Anpas­sungs­sa­che des CSS-Codes, beim zwei­ten Pro­blem bin ich für jeden Tipp dank­bar, da stehe ich ein wenig auf dem Schlauch. Für einen Schnell­schuss von nicht ein­mal zwei Stun­den bin ich aber sehr zufrieden.

Fra­gen zur Anpas­sung an eigene Wün­sche darf man gerne in den Kom­men­ta­ren stellen.