Image resizing on mouveover

by Johan Preynat

HTML

<div id="main">
    <div id="PicGallaryL">
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" /></a>
        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" /></a>
            <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" /></a>
                    <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                    </div>
                    <div id="PicGallaryR">
                        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                            <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                    <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                        
                                    </div>
                                    <div id="MainImage">
                                        <div id="title">Sterling silver ethnic filigree ring, Yemenite Art</div>
                                        
                                    </div>
                                    <div id="PicGallaryB">
                                        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                            <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                                <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                                    <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                                        <a href="#"><img class="imgArt" src="http://i58.tinypic.com/2jb04z4.png" ></a>
                                                 ...

CSS

#main{
    width: 1000px;
    height: 720px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-radius: 7px;
    border-color:silver


}

#title{
    position:relative;
    width:679px;
    font-size: 26px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    left:-4px;
    top:121px;
    border: solid;
    background-color:silver;
    text-align:center;
    z-index:-100;


}
#MainImage{
    background-image: url('zlf246.jpg');
    position:relative;
    width: 680px;
    height: 560px;
    margin-left: 155px;
    background-repeat: no-repeat;
    z-index:-200;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-radius: 7px;
    border-color:silver

}

    #PicGallaryR {
    width: 150px;
    height: 560px;
    float: right;
    direction: rtl;

}

    #PicGallaryL {
    width: 150px;
    height: 560px;
    float: left;

}

    #PicGallaryB {
    width: 993px;
    height: 145px;

}
    a, .imgArt {
    width:150px;
    height:140px;

}

JavaScript

$(function () {
$(".imgArt").bind("mouseenter", function () {

    var n = $(this).clone();
    var of = $(this).offset();
    var isRight = $(this).closest("div").attr("id") == "PicGallaryR";
    var options = {
        position: 'absolute',
        top: of.top,
        margin: 0
    };
    
    if (isRight) options["right"] = 918;
    else options["left"] = of.left;
    n.css(options)
        .appendTo($("#main"))
        .animate({
        width: 300,
        height: 280
    });

    var originalWidth = $(this).css('width');
    var originalHeight = $(this).css('height');
    
    n.bind("mouseleave", function () {
        $(this).animate({
            width: originalWidth,
            height: originalHeight
        }, 300, "linear");
    });
});

});