Wie erstellt Bing.com vergrößerte Thumbnails?

Question

Wenn ich Bilder mit Bing.com suche, stelle ich fest, dass ihre Bilder gut beschnitten und sortiert sind. Wenn Sie Ihre Maus auf ein Bild legen, wird ein anderes Fenster mit einem vergrößerten Bild angezeigt.

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

Ich möchte die gleiche Sache in meinem Programm zu tun. Ich habe den Quellcode ihrer Seite überprüft. Sie benutzen Javascript, aber ich habe immer noch keine Ahnung, wie sie es machen. Kennt jemand das? Jeder Vorschlag ist willkommen.

Answer 1

Wenn Sie sich den HTML-Code ansehen, sehen Sie unmittelbar über jedem der Bilder einen Bereich. Es setzt den Anzeigestil dieses Frames von "none" auf "block". Es verwendet dann eine Animationsbibliothek, um den Inhalt des Deckungsrahmens zu ändern.

Answer 2

Es ist das gleiche Bild. Es vergrößert es nur leicht.

Answer 3

Hier ist ein einfaches HTML/CSS/Javascript Beispiel der Anzeige Eigenschaft eines Elements mit Javascript Wechsel:

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 
} 

Sie verwenden auch eine phantastische Übergangssache wie scriptaculous's Effekt-Grow found here.