Christmas present! Display a tooltip image on the shopping cart icons.

[NormanRouxel]

This should work on most SellerDeck versions. The shopping cart shows a small icon for each product. This tweak displays a larger version of the icon as a tool-tip when the customer hovers over the icon.

To install, go to Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions
Scroll to the bottom and after all existing code paste the following:

<style>
/* Tooltip for shopping cart icons */
#ct-popimg {min-width:100px; max-width:200px;}
#ct-preview {position:absolute; border:1px solid #999; border-radius: 5px; background:#ffffff; padding:5px; display:none; color:#333; z-index:999999;}
</style>

<script type="text/javascript">
/*
 * Image preview script - tweaked drillpine for unique namespace and repositioning
 * written by Alen Grakalic (http://cssglobe.com)
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 */

this.ct_ImagePreview = function(){    
    var xOffset = 30;    // NB back to front
    var yOffset = 20;

    $("img.cartthumbnail").click(function(e){return false;});    // inhibit click
    $("img.cartthumbnail").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='ct-preview'><img id='ct-popimg' src='"+ $(this).attr('src') +"' alt='Image preview' />"+ c + "</p>");
        var ttwidth = $("#ct-preview").width();
                                 
        $("#ct-preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",((ttwidth + e.pageX + yOffset) < $(window).width() ) ? e.pageX + yOffset : e.pageX - ttwidth - yOffset + "px")
            .fadeIn(500);                        
    },
    function(){
        this.title = this.t;    
        $("#ct-preview").remove();
    });    
    $("img.cartthumbnail").mousemove(function(e){
        var pw = $("#ct-popimg").width();
        $("#ct-preview").width(pw);
        var border_top = $(window).scrollTop();
        var ttheight = $("#ct-preview").height();
        var ttwidth = $("#ct-preview").width();
        var top_pos = (border_top+(xOffset*2)>=(e.pageY - ttheight)) ? border_top + xOffset : e.pageY - ttheight - xOffset;
        $("#ct-preview")
            .css("top", top_pos + "px")
            .css("left",((ttwidth + e.pageX + yOffset) < $(window).width() ) ? e.pageX + yOffset : e.pageX - ttwidth - yOffset + "px");
    });            
};

$(document).ready(function(){ct_ImagePreview();});
</script>

Update the site and that's it.