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.<br />Und das alles, ohne beim Schreiben des Eintrages viel Aufwand zu haben.“ class=“o-intrinsic-image lazyload“/></span></span><noscript><img src=$(".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.