Image Thumbnail, With Max-width, And Max-height -- Onmouseover, View A Bigger Image Somehow

I've set a thumbnail to have a max-width and max-height and need to set up some kind of onmouseover setup to where when they hover over the image, it shows them a bigger image. I c

Solution 1:

Is it a possibility to just spoof an absolute positioned duplicate, along with the thumbnail, nested inside a wrapping div assigned a relative position?

<styletype="text/css">.meDiv
    {
        position:relative;
        border:1px solid black;
        width:200px;
        height:100px;
    }

    .meSmall
    {
        display:block;
        width:100%;
        height:100%;
    }

    .meBig
    {
        z-index:10;
        position:absolute;
        left:0px;
        top:0px;
        display:none;
        width:800px;
        height:350px;
    }
</style><divclass="meDiv"><imgclass="meSmall"src="imageURL"onmouseover="Big();" /><imgid="bigOne"class="meBig"src="imageURL"onclick="Small();"onmouseout="Small();" /></div><scriptlanguage="javascript">functionBig() {
    document.getElementById('bigOne').style.display = "block";
}

functionSmall() {
    document.getElementById('bigOne').style.display = "none";
}
</script>

Obviously the code given won't directly plug into your scenario or win any awards, but it's just to give an idea of the concept.

Using this you could apply whatever size restrictions you want to the wrapping div and/or thumbnail (bugs with max-width/max-height permitting) without affecting the large image or dislodging any wrapped text. You could also use the characteristics of the thumbnail to determine traits of the large image if you need to by employing a bit of JavaScript black voodoo magic (I'm a jQuery fan myself).