Clipping an image

[ShawnDev]

Using Javascript and CSS, I am trying to create an animation where a picture (jpg) is displayed by an expanding rectangle from it's center point.

I haven't gotten to the animating part because I can't get the clip and overflow properties to work at all in IE 6 (I'm focusing on one browser for now - I'll work on compability after I've gotten the basics nailed down). By "not working", I mean there is no noticable change to the image when I try to set the clip rectangle in via javascript. (Nor was there any when it set it statically in a stylesheet, for that matter.)

Are overflow/clip supported by IE6? Am I missing some key bit of knowledge about clipping and bounding boxes?

The code is a bit messy right now (as it's under development), but you can look at it here:

http://www.codemastershawn.com/classes/idev211/project4/project4.php

I'm trying to set the clip rectangle in the function clipPicIn().

Thanks,

[antares686]

The easiest way I know if is Transitions using the Square iris.

Look here DHTML Objects (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp) and goto the IMG item, then look at filters.

[ShawnDev]

Thanks for the tip, but I am looking explicitly to use the clip functionality of the CSS standard. This code needs to run in all browsers, not just IE.

(In other words, I'm not looking for the "easy" way - I'm looking for the "proper" way.)