dynamically preview large image on mouseover using jquery and css

If it is not helpful please refer : http://kapil103.spaces.live.com

Steps To Follow :


1) Add CSS Styles :


/* Image Hover **/



A.imageEnlarge
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
background: #ffffff;
float: left;
border-bottom-width: 0px;
width: 65px;
height: 65px;
border-right-width: 0px;
text-decoration: none;
}
A.imageEnlarge IMG
{
border-top-width: 0px;
display: block;
border-left-width: 0px;
border-bottom-width: 0px;
border-right-width: 0px;
}
A.imageEnlarge:hover
{
z-index: 500;
color: #000;
position: relative;
background-color: #ffffff;
text-decoration: none;
}
A.imageEnlarge B
{
padding-right: 10px;
display: block;
padding-left: 10px;
left: -9999px;
padding-bottom: 10px;
padding-top: 10px;
position: absolute;
-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
opacity: 0;
filter: alpha(opacity=0);
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.6s ease-in-out;
width: 401px;
height: 401px;
}
A.imageEnlarge:hover B
{
border-right: #aaa 1px solid;
padding-right: 10px;
border-top: #aaa 1px solid;
padding-left: 10px;
background: #ffffff;
left: 80px;
padding-bottom: 10px;
border-left: #aaa 1px solid;
padding-top: 10px;
border-bottom: #aaa 1px solid;
top: -85px;
opacity: 1.0;
filter: alpha(opacity=100);
width: 401px;
height: 401px;
}


/* Image Hover End */



2) Html Format Must be:

3) Jquery To Be Used :


(function($) {
$.fn.thumbPopup = function(options) {
//Combine the passed in options with the default settings
settings = jQuery.extend({
popupId: "thumbPopup",
imgSmallFlag: "_t",
imgLargeFlag: "_l",
loadingHtml: "Loading"
}, options);

//Create our popup element
popup =
$("

")
.attr("id", settings.popupId)
.appendTo("b").hide();


//Attach hover events that manage the popup
$(this)
.hover(setPopup);

function setPopup(event) {
var fullImgURL = $(this).attr("src").replace(settings.imgSmallFlag, settings.imgLargeFlag);

$(this).data("hovered", true);

//Load full image in popup
$("")
.bind("load", { thumbImage: this }, function(event) {
//Only display the larger image if the thumbnail is still being hovered
if ($(event.data.thumbImage).data("hovered") == true) {
$(popup).empty().append(this);
$(popup).show();
}
$(event.data.thumbImage).data("cached", true);
})
.attr("src", fullImgURL);

//If no image has been loaded yet then place a loading message
if ($(this).data("cached") != true) {
$(popup).append($(settings.loadingHtml));
$(popup).show();
}


}



//Return original selection for chaining
return this;
};
})(jQuery);


...................Thats All Folks..................... Happy Coding ..!!