Google Image popup (how do they)

**LeonardWizzard** · 12-19-2010, 05:03 PM

How does google image search results pop-up zoom on mouseover, overlaying other images and showing more info on bottom as text and on click it opens.

is this done wit java script? ( note: im not looking for a scrip that just zooms image but the way google has it - the whole image container zooms displays more info about the image expanding border on bottom)

if you dont know what I am talking about search any image in google , they lay out left to right filloing browser space and when you mouse over them they pop-zoom out.

thank you in advance if anyone points me in right direction.
P.S. (and it for some reason doesnt work in Opera)

**LeonardWizzard** · 12-19-2010, 10:11 PM

Am I failing to convey the message? nobody has an idea about this?

Basically to simplify my question.

Can Java Script control resizing of a DIV element on mouse over.
and if yes, are there any examples I could look at?

ty

**djr33** · 12-19-2010, 10:55 PM

Resizing a div is not a standard operation. I assume you mean that you want all of the contents in the div to zoom, not just make the dimensions of the div larger.

<div onclick="zoom(this);">......</div>
That's all you need on the div, assuming that 'zoom()' is a function that will make the div and all of its contents larger, but doing that will be difficult. You'll need to loop through them and check what kind of element each is, then 'zoom' it-- change the dimensions of an image, make font sizes larger, make block elements larger...

If you know the specific (consistent) contents of the div it may be easier, if for example there are only two elements: some text and an image. That would avoid the loop and you could target each element specifically.

Can you link to the page on which you want to apply the effect?

Since this is a fairly complicated request (unless your link reveals some easy method) you may want to repost this in the paid work requests section.

**LeonardWizzard** · 12-19-2010, 11:19 PM

Thanks for a reply, I dont have a page yet to link but my goal was to produce similar effect as google image search results.

1) box would contain:
Image + one line of text

2) mouseover would sorta pop-zoom that box including image but text would stay same size and on bottom would be one more line of text.extended description)
(if you search any image in google and mouse over on of them you'll see exactly what Im talking about)

As far as I can tell Google image search results use css3 pseudo :hover and doesn't work with Opera and browser versions that don't support css3 . So I retracted to JavaScript.

Back in the day old Dreamwaeaver 2,3 had (mouse over, on click, on load etc.) effects with Java Script for layers and divs built in events window, including layers moving across page etc.
So I assumed to find lot of info about it but surprisingly not much at all.

I cant even find a resource to learn how to manipulate divs with javascript. Most "tutorials" I've seen are heavily wall-of-text-bloated and preformated for a very specific task rather then explaining principles behind it.