Tooltips mit Bildern

by shapeshifta

HTML

<div id="wrapper">
    <a href="#" class="thumb"><span title="bla bla bla" style="display:none">http://media2.auto.de/img/wallpapers/09_t.jpg</span>Testlink</a><br /><br /><br />
    <div id="wallpapers">
        <dl class="walls textsmall ph mt center left">
            
            <dt>
                <img class="thumb" height="87" width="139" alt="Motiv 9" src="http://media2.auto.de/img/wallpapers/09_t.jpg" longdesc="http://media2.auto.de/img/wallpapers/09_t.jpg"/>
            </dt>
            
            <dd>
                <a href="http://www.auto.de/img/wallpapers/Motiv_09/1280x800.jpg" target="_blank">1280 x 800</a><br />
                <a href="http://www.auto.de/img/wallpapers/Motiv_09/1280x1024.jpg" target="_blank">1280 x 1024</a><br />
                <a href="http://www.auto.de/img/wallpapers/Motiv_09/1440x900.jpg" target="_blank">1440 x 900</a><br />
                <a href="http://www.auto.de/img/wallpapers/Motiv_09/1600x1200.jpg" target="_blank">1600 x 1200</a><br />
                <a href="http://www.auto.de/img/wallpapers/Motiv_09/1680x1050.jpg" target="_blank">1680 x 1050</a>
            </dd>
            
        </dl>
    </div></div>

CSS

#PicPreview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}
#PicPreview img, #PicPreview caption{display:block}

JavaScript

var imagePreview = function() { /*Beginn Konfiguration */
    // für Distanz zum Mauszeiger
    xOffset = 10;
    yOffset = 40;

    
    $("body").append("<p id='PicPreview'></p>");
    var preview = $("#PicPreview");

    /* Ende Konfiguration */

    $('#wrapper')
        .delegate("img.thumb, a.thumb", 'mouseover mouseout', function(e) {
        
        var thumb, thumbTitle;
        if( e.target instanceof Image ){
            thumb = $(this).attr('longdesc');
            thumbTitle = $(this).attr('alt');
        } else {
            var getSpan = $(this).children('span');
            thumb = getSpan.html();
            thumbTitle = getSpan.attr('title');
        }
        var c = (thumbTitle !== '') ? '<caption>' + thumbTitle + '</caption>' : null;

        if (e.type === 'mouseover') {
            preview
                .html('<img id="bigPreview" src="' + thumb + '" alt="' + thumbTitle + '" />' + c)
                .css({"top": (e.pageY - xOffset) + "px",
                    "left": (e.pageX + yOffset) + "px"})
                .fadeIn("fast");
        } else {
            preview.hide("fast");
        }
    }); 
};


// starting the script on page load
$(function() {
if( $("img.thumb, a.thumb").length ){
       imagePreview();
                                                 }
});