logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-15-2009, 04:46 AM   #1
Geijutsuka
 
Join Date: Feb 2009
Posts: 2
Default Zoom on Mouseover

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-Bird...-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);">
[FONT=verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif]
Not being too familiar with javascript... I couldn't make much out of it.
Anyone have any hints?
Thank you!
[/FONT]
Geijutsuka is offline   Reply With Quote
Old 02-15-2009, 08:54 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by Geijutsuka View Post
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-Bird...-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);">
[FONT=verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif]
Not being too familiar with javascript... I couldn't make much out of it.
Anyone have any hints?
Thank you!
[/FONT]
There seems to be a couple of javascript and CSS files connected to this behaviour to make it work
Code:
<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.
Corrosive is offline   Reply With Quote
Old 02-15-2009, 09:03 PM   #3
Geijutsuka
 
Join Date: Feb 2009
Posts: 2
Default

Alright! Thanks Corrosive.
Geijutsuka is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:57 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com