How to Show image preview on thumbnail hover

Question

i am using http://cssglobe.com/lab/tooltip/02/ to show image preview if you go to the inspect element on this page and set the float:right; and hover to the nearest image to the window the preview image will hide behind the screen. i want that to display to the left if the hovered image is to the extreme right and viceversa. any help is appreciated.

the below is the js which is handling the mouseover and mousemove

    /*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 10;
        yOffset = 30;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

Answer 1

I wrote something a bit different and then read precisely your question :( I hope it still will help you. All you have to change is to get rid of Math.min and have an simple IF, and when it's true change the offsets a bit.

trc_x = Math.min(trc_x + event.pageX, Mx);
trc_y = Math.min(trc_y + event.pageY, My);

http://jsfiddle.net/V5JCq/9/