How does Bing.com create enlarged thumbnails?

Question

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.

http://www.bing.com/images/search?q=Heros&FORM=BIFD#

I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

Answer 1

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

Answer 2

It's the same image. It just enlarges it slightly.

Answer 3

Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:

HTML:

<div id="image1" class="image" onmouseover="showImg(1);">
   Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
   Here's the enlarged image and info about the picture
</div>

Javascript:

function showImg(num){
   document.getElementById('bigImage' + num).style.display='block';
}

function hideImg(num){
   document.getElementById('bigImage' + num).style.display='none';
}

CSS:

.bigImage{
   display:none
}

They also use a fancy transition thing like scriptaculous's effect-grow found here.