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).