Come fa Bing.com creare miniature allargata?

Question

Quando cerco immagini utilizzando Bing.com, mi rendo conto le loro immagini sono ben ritagliate e ordinati. Quando si posiziona il mouse su un'immagine, un'altra finestra pop-up con un'immagine ingrandita.

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

Io voglio fare la stessa cosa nel mio programma. Ho controllato il codice sorgente della loro pagina. Stanno usando JavaScript, ma ancora non ho idea di come lo fanno. C'è qualcuno che ha familiarità con esso? Ogni suggerimento è benvenuto.

Answer 1

Se si guarda il codice HTML, vedrete un arco immediatamente sopra ciascuna delle immagini. Esso definisce lo stile di visualizzazione di quel fotogramma da "nessuno" a "blocco". Poi usa una libreria di animazione per ridimensionare il contenuto della cornice di protezione.

Answer 2

E 'la stessa immagine. E 'solo allarga leggermente.

Answer 3

Ecco un semplice HTML / CSS / Javascript esempio su come cambiare la proprietà di visualizzazione di un elemento con 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
}

Usano anche una cosa di transizione di fantasia come di scriptaculous effetto-grow trovato qui.