How to make an image zoom even when it changes?

I'm trying to make a script that zooms into an image. This is the page:

http://vermilionsite.com/phone/?id=1

Click the first option, then choose a col开发者_运维问答our, then mouseover the image. It uses the original image. How can I make it so that the zoom uses the new coloured image?

The jQuery function you have just adds a div with a background over the image, while the original mouse overlay function that zooms your image moves the 'bg-iphone.png' background around in an overlay, so the logic is somewhat flawed as you would also need another background image with the same color on the original div so a bg-iphone.png modified with the same color. I guess you could modify the script that returns your color overlay to also return a modified image and change the background of the image from bg-iphone.png to a png with the same color as the overlay.

Or you could have three modified pngs with the same colors you need that would change the background image in the select function.

Hope this helps.

use this http://www.userdot.net/files/jquery/jquery.loupe/demo/