CSS clip:rect wierdities

[xoggoth]

Still messing around with zoomy scrolly stuff, it seems this should be pretty easy with filterrogidXImageTransform.Microsoft.AlphaImageLoader zoom method and clip:rect. (It only needs to work in IE6+)

Nothing says what the arguments to the first are and they appear quite bizarre. One would expect x,y,w,h by CSS standard but messing about with simple example below it appears to be y1,x2,y2,x1. Is this normal or some frigging bug in IE8? or have I got my monitor upside down? Don't want to waste time implementing in some buggy thing that is likely to change.

Has anyone actually used it?

<html>
<head>
</head>
<body>
<style type="text/css">
div {
background: url(test.jpg);
clip:rect(150px, 90px, 160px, 80px);
border:2px solid black;
height:300px;
width:300px;
position:absolute;
top:100px;
left:100px;
}

</style>
<div>
Clipped div box with image in the background.
</div>

</body>
</html>

 

[chicane]

The order of arguments is indeed as you specify. It might be more intuitive to think of it as top, right, bottom, left - ie clockwise order starting from top.

 

[xoggoth]

Cheers chicane. Was tearing hair out thinking it was x,y,w,h and wondering why the image kept disappearing. Almost got summit working now.

 

[NickFitz]

The order is top, right, bottom, left: imagine going clockwise from 12 o'clock, is the easiest way to remember it. This applies throughout CSS, so you also use this order on shortcut properties like border-width.

The most important points about clip are firstly, that it can only be applied to elements that are absolutely positioned; and secondly, that IE (less than 8) will fail if you use the syntax with commas: clip: rect(12px, 128px, 96px, -7px);

You have to use the version without commas: clip: rect(12px 128px 96px -7px);

Luckily everything supports the comma-less method for compatibility's sake

EDIT: Oops, chicane got there first. Still, the comma bit catches a lot of people out

 

[xoggoth]

Ta. Beats me why so many decent references including MS, fails to say what the arguments are. Some expert on the net was sure it was x,y,w,h.

 

[NickFitz]

Ta. Beats me why so many decent references including MS, fails to say what the arguments are. Some expert on the net was sure it was x,y,w,h.

MS seems to have it right in their CSS reference

I tend to just go to the relevant specs for this kind of thing though

 

[xoggoth]

There you is, apart from very minor position errors to sort out, a real moving magnifier facility with no Flash or complicated libraries that works in IE or firefox. Really simple code in the end.

http://www.gatekeeperel.co.uk/temp/zoomnoflash.html

PS Nice if one could make it round. I think one can only do that with a bit of Flash.

 

[NickFitz]

There you is, apart from very minor position errors to sort out, a real moving magnifier facility with no Flash or complicated libraries that works in IE or firefox. Really simple code in the end.

http://www.gatekeeperel.co.uk/temp/zoomnoflash.html

PS Nice if one could make it round. I think one can only do that with a bit of Flash.

Works in Chrome too, which should mean it works in Safari

 

[xoggoth]

Aaaagh! The lens is revealing details, like small garden buildings, not in the normal picture. Oh, its a slightly different photo, I thought my javascript was possesssed by evil spirits for a moment there.

Explains the small errors anyway.

 

[NickFitz]

Aaaagh! The lens is revealing details, like small garden buildings, not in the normal picture. Oh, its a slightly different photo, I thought my javascript was possesssed by evil spirits for a moment there.

Explains the small errors anyway.

This could be adapted for viewing porn in the office - boss walks in, release the mouse button, and all (s)he sees on your screen is a nice pie chart