Clipping an image as it is dragged

[Peter Chase]

Hi,

I have a Web application where you can zoom in on part of a page, then drag the zoomed image around, to adjust what part you are seeing. Although this is not a mapping application, and I suspect my code is not like Google's, you can probably understand my application as being rather like Google Maps.

The image is inside a DIV. When in its normal position, the image fits wholly within the DIV. When dragged, parts of the image go outside the DIV. I want the image to clip, so that the bits outside the DIV are not visible.

I have used "position: relative" on the image; I then adjust "left" and "right" programmatically, to make the image move as the mouse is dragged. I use "overflow: hidden" on the enclosing DIV.

On FireFox and Safari browsers, this achieves what I want. But Internet Explorer does not clip, so the parts of the image outside the DIV are visible.

Any suggestions how I can get IE to behave like FF and Saf?
[ August 18, 2006: Message edited by: Peter Chase ]

[Gregg Bolinger]

Originally posted by Peter Chase:
Any suggestions how I can get IE to behave like FF and Saf?

Contact Bill Gates and tell him to have his developers create a browser that is w3c compliant. Sorry, not helpful, but couldn't resist.

[Peter Chase]

Feeding the troll a little bit, but hoping others won't turn this into a Browser Wars topic...

IE does have some annoying non-conformances, but some of its "extras" are rather nice things one wishes were standard. Some of the standards aren't as hard-and-fast as one might wish, too, meaning different but plausible interpretations are sometimes possible. I don't know whether my problem results from a deliberate non-compliance by IE or just a different interpretation of woolly standard.

Anyway, I have to make my app work with all three mentioned browsers, so wishing IE was better does not help.

Can anyone help with my original question?

[Eric Pascarello]

You doing something like this?

<div STYLE="overflow: hidden; position: absolute;
width: 20px; height: 20px; clip: rect(10px 30px 30px 10px)">There was a guy with a water gun</div>

Eric

[Peter Chase]

Here's the extracted code: -

<div id="RoamImageDiv">
<img id="RoamDynamicImage" src="roamImage.m;jsessionid=2idy319d6thm6?clickX=0&..." title="" alt="">
</div>

And the styles: -

#RoamImageDiv
{
 text-align: center ;
 vertical-align: middle ;
 padding: 0px ;
 margin: 0px ;
 border: 0px ;
 overflow: hidden ;
}
 
#RoamDynamicImage
{
 cursor: default ;
 position: relative ;
}

Some JavaScript then adjusts "left" and "right" properties of RoamDynamicImage element, as the user drags the mouse.

[Peter Chase]

I got a solution from a helpful poster on comp.lang.javascript .

There seems to be a small bug in IE. But it can be worked around by explicitly specifying a width and height for the enclosing DIV. It is OK to do this programmatically.