PDA

View Full Version : Zoom on Mouseover


Geijutsuka
02-15-2009, 03:46 AM
I've been recently updating my gallery-oriented site, and today I came across a nice behavior I would like to use on my site, found here:

http://www.shopkawaii.com/Q-Lia-Birds-Sparkly-Epoxy-Stickers-p/22124-4.htm

The effect I'm referring to is when your mouse hovers over the sticker image, you get a zoomed image to the right of it. I am guessing this is not as simple as an image swap behavior, and I was wondering if anyone had any ideas on how this was done. I looked at the source and found this code:
<td class="nav" onmouseover="mOvr1(this);" onmouseout="mOut1(this);">

Not being too familiar with javascript... I couldn't make much out of it.
Anyone have any hints?
Thank you!

Corrosive
02-15-2009, 07:54 AM
I've been recently updating my gallery-oriented site, and today I came across a nice behavior I would like to use on my site, found here:

http://www.shopkawaii.com/Q-Lia-Birds-Sparkly-Epoxy-Stickers-p/22124-4.htm

The effect I'm referring to is when your mouse hovers over the sticker image, you get a zoomed image to the right of it. I am guessing this is not as simple as an image swap behavior, and I was wondering if anyone had any ideas on how this was done. I looked at the source and found this code:
<td class="nav" onmouseover="mOvr1(this);" onmouseout="mOut1(this);">

Not being too familiar with javascript... I couldn't make much out of it.
Anyone have any hints?
Thank you!


There seems to be a couple of javascript and CSS files connected to this behaviour to make it work <script type="text/javascript" src="/a/j/vzoom.js"></script>
<link type="text/css" rel="stylesheet" href="/a/c/vzoom.css" />

Either open these files and figure out how they are referenced or look at a framework such as JQuery or mootools to see if they have a similar behaviour/effect you can use. Both of these frameworks usually have full instructions to install and configure plug-ins.

Geijutsuka
02-15-2009, 08:03 PM
Alright! Thanks Corrosive.