Clipped image with dynamic clip change

[RIck Measham]

I pop up a window with a picture in it, however the picture can be very
large. So here's what I want to do: Pop up a mindow with the picture
clipped to the size of the window, then place a scaled version of the
picture on top of it. Thus it will look like this:

+------------------------+
| WINDOW |
+------------------------|
| |
| |
| |
| |
| +--------+ |
| | | |
| | | |
| +--------+ |
+------------------------+

Now, the scaled version will track the mouse when mouseover. I can do that.
However what I need to do is to move the clipping of the larger background
picture to display an area centered on the mouse's position in the smaller
picture.

I figure this is two absolutely placed divs. Also I might as well just load
the same picture twice rather than having two pictures to download. I'll
just scale the smaller one.

As I said I can get the smaller image's mouse position, however I can't work
out how to clip the larger image. It seems I need to mix clipping with some
sort of scrolling because clipping just adds a border!

Any help greatly appreciated
Cheers!
Rick

 

[Lasse Reichstein Nielsen]

As I said I can get the smaller image's mouse position, however I can't work
out how to clip the larger image. It seems I need to mix clipping with some
sort of scrolling because clipping just adds a border!

Have you considered using the large picture as a background image for
a box? Then you can use the CSS background-position property to move
it around inside the box.

/L