By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,974 Members | 1,913 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,974 IT Pros & Developers. It's quick & easy.

Clipped image with dynamic clip change

P: n/a
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

--
Obviously the reply-to is a fake. Just change the 'spam-' to 'i' so that the
result sounds like why you go to an optometerist.
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
RIck Measham <ri***@spam-site.net.au> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.