Gut ist es, wenn Bilder auf Webseiten einen Titel haben. Dafür gibt innerhalb des img Tags das alt Attribut, das als Tooltip angezeigt wird. Das bohre ich etwas mit einem selbstgeschriebenen jQuery Plugin auf.
Dabei wird jedes über den jQuery Selektor ausgewählte Bild durch ein gleich großes div ersetzt und diesem div dann als hintergrundbild zugewiesen. Zusätzlich wird ein weiteres div eingefügt, in dem dann der Text aus dem alt Attribut gerendert werden kann. Vorteilhaft an diesem Ansatz ist, dass dabei der Tooltip nicht angezeigt wird. Ist allerdings Javascript ausgeschaltet, funktioniert der Tooltip.
Hier ein Beispiel: Ein Bild mit einem Image-Overlay, das angezeigt wird, wenn der Benutzer mit der Maus über dem Bild ist.
Das Plugin wird ganz normal über einem jQuery Objekt aufgerufen nachdem der DOM Baum fertig ist. Zwei Optionen sind möglich, die Positionierung des Overlays auf dem Bild und die Angabe einer eigenen CSS Klasse.
$(function() { $("img").imgoverlaytitle(); // With parameters ... // $("img").imgoverlaytitle( //{ vertical_align : "top", //overlay_class : "my_class" }); });
Das Overlay kann per CSS nach Wunsch gestylt werden. Bei dem Beispiel wurden folgende Stylesheets verwendet:
.img_overlay { display: none; color: #161616; background-color: #FFFFFF; padding: 3px; border: 1px solid #161616; }
Hier ist der Code des Plugins: (Gibt es auch als Download)
// imgoverlaytitle.jquery.js // Juri Glass (function($){ $.fn.imgoverlaytitle = function(options) { var opts = $.extend($.fn.imgoverlaytitle.defaults, options); return this.each(function() { var $this = $(this); // Creating the overlay var overlay = $('<div class="' + opts.overlay_class + '">' // The text from the alt attribute + $this.attr('alt') + '</div>'); // Creating a replacement div with the image as background // and the image dimensions. var replacement = $('<div/>') .css('background-image', 'url(' + $this.attr('src') + ')') .css("height", $this.attr("height")) .css("width", $this.attr("width")) // The position of the overlay .css("display", "table-cell") .css("vertical-align", opts.vertical_align) // The insertion of the overlay .html(overlay) // The actual replacement $this.replaceWith(replacement); // Enable the mouseover replacement.hover( function () { overlay.show(); }, function () { overlay.hide(); } ); }); }; $.fn.imgoverlaytitle.defaults = { vertical_align : "bottom", overlay_class : "img_overlay" }; })(jQuery);