I'm building a photogallery, and as per the requirement, when the mouse rolls over the thumbnail image, a little enlarged version of the thumbnail with details like title of the actual image, size etc.. needs to be displayed on the enlarged image. Note- the enlarged image is displayed only upon rollover, and immediately disappears when the mouse moves out of the area of the thumbnail image. I know this is a really common functionality in most of the photogallery sites out there, and a perfect example being the Yahoo Image Search (see: [Yahoo Image Search](http://images.search.yahoo.com/search/images;_ylt=A0PDoYBM3ZlOzj4AEYqLuLkF;_ylu=X3oDMTBvbDQ2Nmh1BHNlYwNpYnV6egRzbGsDaW1nBHBvcwM2Mg--?ei=UTF-8&bz_b=60&bz_n=12&fr2=sfp-buzz&p=Anne%20Hathaway))

Basically, as per the requirement the code needs to be built in Javascript without the use of any libraries like Jquery. So in core JS, the rollover should work. 

I know that the onmouseover can do this, but my question is how do ensure that the enlarged image is displayed appropriately (as in, to the right of the thumbnail when enough space is available, or else to the left/above/top of the thumbnail, as the spacing constraint may be?

Also, how is the "new page" that pops up on rollover designed (well, not exactly a new page, but just an unobtrusive popup)?

Any directions on how to go about is much appreciated. Note - I know libraries ease out this thing, but as I said it needs to be done in core JS, even if the fading-in/fade-out looks crude.

Thanks!