Google magnifier

[xoggoth]

On today's google banner, anniversary of world trade fair, there is a round magnifier which I would like to do (without Flash or Silverlight etc). I know how to do a rectangular magnifier in jscript but not a round one.

Unless it's just a set of overlapping rectangles anyone know how its done?

PS Click to find Osama Bin Laden at the jumble sale.

Where's Ossie?

[thunderlizard]

Assuming it's Javascript, I'd guess you can see the source code if you look.

But it might be something to do with how the circular viewport has a chunky border, which looks exactly the right size to be have a square viewport lurking beneath it.

[xoggoth]

Cheers TL, I did have a look, it's just got a wierd link. It could be just one or more rectangles under that as you say.

[NickFitz]

The container for the magnifier is rectangular, or to be precise 200px square, and its background colour is transparent. Within that is the image for the circular rim of the magnifier, which is a PNG with alpha transparency:



The background images are then positioned absolutely relative to the container in a cross formation such that their rectangular edges are hidden behind the non-transparent parts of the rim.

Here's a screenshot (taken in Safari, which is a Webkit-based browser) in which I've applied a black dashed outline to the outermost container, and given the circular rim 100px top and left margins, thereby pushing it down and to the right:



and here's one also with the dashed outline but with the rim made almost transparent, so you can see how the images are positioned behind it:



FWIW, there are a few CSS3 techniques being used which only work on WebKit browsers (such as Safari and Chrome) or on recent builds of Firefox (maybe in IE 10 beta too, I'm not sure). These are mainly just providing nice transitions and such; for example the magnifier zooms out from very small to full size and from transparent to opaque in a smooth transition of 400ms duration.

[TimberWolf]

The magnified image also contains animations (check out the clock, fountain or dancer) and has detail not present in the static image (e.g. the birds in the tree).

[NickFitz]

The magnified image also contains animations (check out the clock, fountain or dancer) and has detail not present in the static image (e.g. the birds in the tree).

Yep, the magnified images are separate graphics from the small one rather than just zooming it, and the animations are individual absolutely-positioned animated GIFS, e.g.

• Train whistle:
  
  
• Twirly woman:
  
  
• Fountain:

[xoggoth]

Cheers. If that's how it's done I should be able to adapt my Osama example fairly easily. The same technique can also be used for other effects like a flashlight in a dark room or revealing various details as you mention.

[vetran]

Good job you didn't update it you need to add an ocean!

[xoggoth]

That's a point! I post a link to an interactive Find Ossie picture and the next day they do. Spooky! Wahee, look out for a blow up Brownstuff picture.

PS I share a birthday with Nostradamus, is this coincidence?