Page 1 of 1

image manipulation

Posted: Mon Jan 26, 2009 10:29 am
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?

Re: image manipulation

Posted: Mon Jan 26, 2009 12:24 pm
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).