image manipulation

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
buzzby247
Forum Newbie
Posts: 23
Joined: Wed Jan 14, 2009 6:19 am

image manipulation

Post by buzzby247 »

vhttp://www.toysrus.co.uk/Toys-R-Us/Computers/S ... r(0023315)

click zoom and then move ya mouse over the image to see a larger image. any idea how this was done?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: image manipulation

Post by kaszu »

You need 1 normal size image and one large image.

Code: Select all

<div style="width: 300px; height: 300px; overflow: hidden;"> <!-- Only 300x300 px of the large image will be visible, everything outside it will be invisible. -->
   <img src="LARGE_IMAGE.jpg" style="position: relative; margin-left: -20px; margin-top: -60px;" />
 <!-- change large image margin-left and margin-top to move it -->
</div>
<img src="SMALL_IMAGE.jpg" />
On mouse move over small image check position of the mouse and change large image margin-left and margin-top accordingly (of course you need to do some math get correct position).
Post Reply