Magnifying mouseover - how is it done?

  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post September 24th, 2009, 3:26 pm

Hi.
Can anyone tell me how to do this zoom effect on a web page, please?
You can see it used on the magazine cover picture on this site page...
http://www.houseandgarden.co.uk/

Thank you.

Regards,
Ceri
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 24th, 2009, 3:26 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post September 24th, 2009, 4:47 pm

They're doing it in flash. I would imagine it's something like one clip laid over another and masked according to where the mouse is.
I'd love to change the world, but they won't give me the source code.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post September 24th, 2009, 5:43 pm

It's called a magnifying glass effect. Here's a tutorial on exactly how (although I like the way the houseandgarden circle disappears once you mouse out of the flash where the tutorial doesn't take it that far).
http://www.webwasp.co.uk/tutorials/b11- ... /index.php
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Joined: Feb 07, 2004
  • Posts: 263
  • Loc: UK
  • Status: Offline

Post September 24th, 2009, 9:31 pm

Thank you. I'll try that
The vanishing circle is nice but this will do fine.

If anyone finds one with a vanishing circle, please post it too.

Regards,
Ceri
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post September 25th, 2009, 6:12 am

If you grasp the tuto, then you could probably do the same by detecting when the mouse leaves the movie - just pull the circle off stage and back on with mouse enter.
I'd love to change the world, but they won't give me the source code.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.