468,321 Members | 1,734 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,321 developers. It's quick & easy.

Move an image within a clip region

In my Web application, a have an image within a DIV. One of the allowed
user gestures is to drag the image with the mouse. When dragging, parts
of the image that would otherwise be displayed outside the DIV should
be clipped.

I had no trouble at all achieving this on FireFox and Safari. But I
can't get Internet Explorer to do the clipping; it always shows the
whole image, including the bits outside the DIV.

Here's the HTML: -

<div id="RoamImageDiv">
<img id="RoamDynamicImage" src="...">
</div>

Here's the CSS: -

#RoamImageDiv
{
text-align: center ;
vertical-align: middle ;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow: hidden ;
}

#RoamDynamicImage
{
cursor: default ;
position: relative ;
}

The JavaScript code handling mouse events simple adjusts the
"style.left" and "style.top" of the image element, to make the image
move as the mouse is dragged. This works on all the browsers (except
the clipping thing on IE, of course).

It is my understanding that the situation might be better if I used
"absolute" positioning. However, the position is not really fixed, so
"absolute" would be very difficult, if not impossible, to use in this
situation. I did try dynamically switching to "absolute", after letting
the browser do the layout with "relative", but this totally confused
all the browsers!

Any suggestions?

Aug 21 '06 #1
3 2098

pe*********@globalgraphics.com написав:
I had no trouble at all achieving this on FireFox and Safari. But I
can't get Internet Explorer to do the clipping; it always shows the
whole image, including the bits outside the DIV.

Specify DIV size

#RoamImageDiv
{
....
height:150px;
width:50px;

}

Aug 21 '06 #2

marss wrote:
pe*********@globalgraphics.com написав:
I had no trouble at all achieving this on FireFox and Safari. But I
can't get Internet Explorer to do the clipping; it always shows the
whole image, including the bits outside the DIV.


Specify DIV size

#RoamImageDiv
{
...
height:150px;
width:50px;

}
Thanks.

I have only tried it with the height and width hard-coded in the CSS,
like you have shown. That works, but I cannot actually do it that way
for real, because the size varies. I will now try setting height and
width programmatically and see if it still works.

Aug 21 '06 #3

pe*********@globalgraphics.com wrote:
marss wrote:
pe*********@globalgraphics.com написав:
I had no trouble at all achieving this on FireFox and Safari. But I
can't get Internet Explorer to do the clipping; it always shows the
whole image, including the bits outside the DIV.

Specify DIV size

#RoamImageDiv
{
...
height:150px;
width:50px;

}

Thanks.

I have only tried it with the height and width hard-coded in the CSS,
like you have shown. That works, but I cannot actually do it that way
for real, because the size varies. I will now try setting height and
width programmatically and see if it still works.
Yep, works perfectly. Thanks!

Aug 21 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

15 posts views Thread by Anand Ganesh | last post: by
3 posts views Thread by Martin | last post: by
2 posts views Thread by Julie | last post: by
4 posts views Thread by SStory | last post: by
9 posts views Thread by Andy Baxter | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.