getting computed clip rect

[Chris Riesbeck]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaultView.getComputedStyle().

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.clip in IE 7.

Is there a way to do this in those browsers? Am I doing something stupid?

Toy example here, where I can get the class position but not the clip value:

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

 

[GTalbot]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaultView.getComputedStyle().

Hello Chris,

IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle method.

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.clip in IE 7.

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html


What's wrong with RefImage.style.clip?

It should work according to

http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx

when you define the clip property with inline style.

Is there a way to do this in those browsers? Am I doing something stupid?

Well, I examined your webpage and I see areas, spots in the code which
I would upgrade.

1- HTML 4.01 transitional. I would use only HTML 4.01 strict
everywhere.

Step 1 of this page:
http://developer.mozilla.org/en/doc...Making_your_page_using_web_standards_-_how_to

2- <script language="JavaScript"
language is deprecated; type is both forward and backward-compatible.
Therefore, there is no reason whatsoever to use language.

Use Correct <script> Tags
http://www.javascripttoolbox.com/bestpractices/#script

3-
function writeText(id, text) {
document.getElementById(id).innerHTML = text;
}

if the 2nd parameter is text, then you do not need to use innerHTML.
innerHTML should only be used for HTML content.

So here,

function writeText(id, text)
{
document.getElementById(id).childNodes[0].nodeValue = text;
}

You could even test support for this to make your function a bit more
robust, preventing errors. E.g.

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getElementById(id).innerHTML = textparam;
}
else {alert("This parameter can not be resolved as text");};
}

4-
<div style="position:relative" style="width:100px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position:relative; width:100px; height:100px">

This kind of error can be spotted easily with Firefox addon HTML
validator:
http://users.skynet.be/mgueury/mozilla/

5-
<img src="treasure-map.jpg" class="clipped" style="width:380px; height:
374px">

You could try to define the clip property inline here. And that
*should* work in IE 7.

<img src="treasure-map.jpg" style="width: 380px; height: 374px; clip:
rect(0px 100px 50px 0px); position: absolute; top: 10px; bottom:
10px;">

6-
</form> at line 60 should be removed since there is no <form> start-
tag.

Regards, Gérard

 

[GTalbot]

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
  document.getElementById(id).innerHTML = textparam;}

else {alert("This parameter can not be resolved as text");};

}

Oops. I meant to write

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getElementById(id).childNodes[0].nodeValue = textparam;
}
else
{
alert("This parameter can not be resolved as text");
};
}

Regards, Gérard

 

[GTalbot]

But that doesn't seem to work in Safari for Windows 3, nor when I use
image.currentStyle.clip in IE 7.
(...)

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

Another thing.

According to
http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

Gérard

 

[Chris Riesbeck]

Hello Chris,

IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle method.

Yes, that's what I was gathering from some online discussions.

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html


What's wrong with RefImage.style.clip?

It should work according to

http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx

when you define the clip property with inline style.

But my goal was to access the actual clip value in effect, including
that defined by a CSS class. The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

Well, I examined your webpage and I see areas, spots in the code which
I would upgrade.

1- HTML 4.01 transitional. I would use only HTML 4.01 strict
everywhere.

My actual application needs XHTML but I let Tidy pick something and just
verified that IE7 was rendering standards mode.

Step 1 of this page:
http://developer.mozilla.org/en/doc...Making_your_page_using_web_standards_-_how_to

2- <script language="JavaScript"
language is deprecated; type is both forward and backward-compatible.
Therefore, there is no reason whatsoever to use language.

HTML-Kit throws that in and I don't bother ripping it out. However, I
just customized the HTML-Kit template to stop doing that.

Use Correct <script> Tags
http://www.javascripttoolbox.com/bestpractices/#script

3-
function writeText(id, text) {
document.getElementById(id).innerHTML = text;
}

if the 2nd parameter is text, then you do not need to use innerHTML.
innerHTML should only be used for HTML content.

This was a quickie to show the results in different browsers without an
alert(). Point taken but my actual code doesn't write text anywhere.

4-
<div style="position:relative" style="width:100px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position:relative; width:100px; height:100px">

Typo in the toy code. I'm surpised Tidy (as invoked by HTML-Kit) didn't
catch this. Thanks.

5-
<img src="treasure-map.jpg" class="clipped" style="width:380px; height:
374px">

You could try to define the clip property inline here. And that
*should* work in IE 7.

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style, and that, whichever
was done, Javascript could access.

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

<img src="treasure-map.jpg" style="width: 380px; height: 374px; clip:
rect(0px 100px 50px 0px); position: absolute; top: 10px; bottom:
10px;">

6-
</form> at line 60 should be removed since there is no <form> start-
tag.

I'd started to use a form to display results -- forgot to remove when I
switched to storing text into HTML.

Thanks again for your time. It's appreciated.

 

[Chris Riesbeck]

Another thing.

According to
http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

I had hopes there for a second, not having seen a reference to
runtimeStyle before. Unfortunately

document.images[0].runtimeStyle.clip

gives an empty result. When I execute

javascript:alert(document.images[0].style.clip + "#" +
document.images[0].currentStyle.clip + "#" +
document.images[0].runtimeStyle.clip)

the output is #undefined# indicating that clip is indeed not defined for
currentStyle but also that the rect defined on the CSS class is not
available (via the clip property at any rate) in any of these.

Thanks for the pointer though.

 

[dhtml]

Another thing.

According tohttp://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

"...
See Also

clipBottom, clipLeft, clipRight, clipTop
"

You have to build the string yourself.

Another consideration with clip is that it can also be represented by
a Rect:
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-Rect

Taking those both into consideration, I wrote the following function,
used in APE (which could use some review, BTW).

function getCurrentStyleClipValues(el, cs) {
var values = [], i = 0, prop;
for( ;i < 4; i++){
prop = props;
clipValue = cs['clip'+prop];
if(clipValue == "auto") {
clipValue =
(prop == "Left" || prop == "Top" ? "0px" : prop == "Right" ?
el.offsetWidth + px : el.offsetHeight + px);
}
values.push(clipValue);
}
return {
top:values[0], right:values[1], bottom:values[2], left:values[3],
toString : function() {return 'rect(' + values.join(' ')+')';}
};
}


If that is too much of a pain, the just use a clip layer with
overflow: hidden; position: absolute, et c.

<div id="clipLayer">
<div id='content'>lots of large contents...</div>
</div>

Garrett

 

[dhtml]

missing variable from enclosing scope.

var props = ["Top", "Right", "Bottom", "Left"];

 

[GTalbot]

GTalbot wrote:



But my goal was to access the actual clip value in effect,

Actual clip value in the rendered page would involve runtimeStyle in
IE 6+ and document.defaultView in DOM 2 compliant browsers.

including
that defined by a CSS class.

The defined CSS class would refer to the declaration in the stylesheet
and here, that is accessible in IE 6+ and DOM 2 CSS compliant
browsers.

E.g.:

if(document.styleSheets)
{
if("cssRules" in document.styleSheets[0]) // DOM 2 Stylesheets
compliant
{
alert("document.styleSheets[0].cssRules[0].style.clip = " +
document.styleSheets[0].cssRules[0].style.clip);
}
else if("rules" in document.styleSheets[0]) // IE 6+
{
alert("document.styleSheets[0].rules[0].style.clip = " +
document.styleSheets[0].rules[0].style.clip);
};
}
else
{
alert("This script requires support for accessing the list of
stylesheets. Javascript support enabled is required too.");
};

Use of alerts here is just to render data. The whole thing can be made
a lot more dynamic, in real-time, even mouse-interactive-driven.

The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

From its class declaration in the local (embedded) stylesheet, it can
be made accessible by javascript+DOM: I'm sure of this. 100% sure,
even for IE 7+.

Typo in the toy code. I'm surpised Tidy (as invoked by HTML-Kit) didn't
catch this. Thanks.

I use the 18 June 2008 version of HTML Tidy
(downloadable here:
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
).

The precise setting is
join-styles and it is ON by default:
"
join-styles
Type: Boolean
Default: yes
Example: y/n, yes/no, t/f, true/false, 1/0

This option specifies if Tidy should combine styles to generate a
single new style, if multiple style values are detected on an
element.
"
http://tidy.sourceforge.net/docs/quickref.html#join-styles

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style, and that, whichever
was done, Javascript could access.

Hmm... you want
- to be able to access the declarative rule in the local stylesheet
- to be able to modify (set) clip property chosen by the author
- to be able to access (get) the inline style chosen by the author

I'm sure all this is doable in IE 6+. For the declarative rule in the
local stylesheet in IE 6+, you need to use

document.stylesheets[0].rules[0].style.clip

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

It's doable. Sure of this.

I just do not have time right now to "play" with your webpage and to
examine more carefully your variables (rawStyle, compStyle) and
functions with your webpage.

Regards, Gérard

 

[GTalbot]

On Jul 14, 7:12 pm, Chris Riesbeck <[email protected]> wrote:

According to
http://msdn.microsoft.com/en-us/library/ms533569(VS.85).aspx
clip does not apply to currentStyle object but applies to
runtimeStyle. So, you may want to verify this carefully.

I had hopes there for a second, not having seen a reference to
runtimeStyle before. Unfortunately

    document.images[0].runtimeStyle.clip

gives an empty result.

<shrug> Then that's another IE bug... or another nth exaggeration/
shortcoming/error at MSDN2.

Gérard

 

[Thomas 'PointedEars' Lahn]

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getElementById(id).innerHTML = textparam;}

else {alert("This parameter can not be resolved as text");};

}

Oops. I meant to write

function writeText(id, textparam)
{
if(typeof textparam == "string")
{
document.getElementById(id).childNodes[0].nodeValue = textparam;
}
else
{
alert("This parameter can not be resolved as text");
};
}

Those are not equivalent to `innerHTML', of course. In fact, passing a
string of HTML code will not cause an error message but display it unparsed
in the document.


PointedEars

 

[GTalbot]

The whole thing can be made
a lot more dynamic, in real-time, even mouse-interactive-driven.

One example of such capability to create a mouse-interactive DHTML
driven demo on clip which will work even for IE 6:

http://www.gtalbot.org/DHTMLSection/DynamicClipDemo.html

as the clip property cropping the vertical and horizontal lines (which
in fact are the borders of <div>s) is set by the mouse coordinates
within the browser window viewport in real-time.

From reading your post and examining your webpage, maybe... just a
hunch... you want to achieve what these webpages have been talking,
explaining...:

Creating Thumbnails Using the CSS Clip Property
http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Misunderstood CSS Clip
http://www.ibloomstudios.com/articles/misunderstood_css_clip/

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug33
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug18

Regards, Gérard

 

[Thomas 'PointedEars' Lahn]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaultView.getComputedStyle().

[...]
IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle method.

How can you know this about IE 8 when it is still beta 1?

It works there. You must be doing something wrong.

BTW, there are developer tools built in Safari:

See <http://developer.apple.com/internet/safari/faq.html#anchor14>
and e.g.

Well, I examined your webpage and I see areas, spots in the code which
I would upgrade.

1- HTML 4.01 transitional. I would use only HTML 4.01 strict
everywhere.

It might be necessary to use HTML 4.01 Transitional, for the `target' attribute.

So here,

function writeText(id, text)
{
document.getElementById(id).childNodes[0].nodeValue = text;
}

This would only work if the first child node of the element was a text node.

4-
<div style="position:relative" style="width:100px; height:100px">

Here, the style attribute is over-declared, duplicated. Just use
<div style="position:relative; width:100px; height:100px">

This kind of error can be spotted easily with Firefox addon HTML
validator:
http://users.skynet.be/mgueury/mozilla/

The Web Developer extension is the more versatile tool for Firefox, but
unless you have a validator installed on your local Web server, it requires
an Internet connection for validation:

<https://addons.mozilla.org/firefox/addon/60>

However, one does not need an add-on for validation:

--

Your signature delimiter is still borken, which is why your signature is not
recognized and might be regarded as spam (due to the URIs in it). The
delimiter must be dash-dash-space-CR-LF. I suggest not to use signatures
with Google Groups, and better not to use Google Groups for posting in the
first place, for the number of serious flaws of its Web interface.


PointedEars

 

[Chris Riesbeck]

"...
See Also

clipBottom, clipLeft, clipRight, clipTop
"

You have to build the string yourself.

My problem is getting the data, not constructing a new rect.

Another consideration with clip is that it can also be represented by
a Rect:
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-Rect

Taking those both into consideration, I wrote the following function,
used in APE (which could use some review, BTW).

function getCurrentStyleClipValues(el, cs) {
var values = [], i = 0, prop;
for( ;i < 4; i++){
prop = props;
clipValue = cs['clip'+prop];
if(clipValue == "auto") {
clipValue =
(prop == "Left" || prop == "Top" ? "0px" : prop == "Right" ?
el.offsetWidth + px : el.offsetHeight + px);
}
values.push(clipValue);
}
return {
top:values[0], right:values[1], bottom:values[2], left:values[3],
toString : function() {return 'rect(' + values.join(' ')+')';}
};
}

Since no clip object is on the style object (any of them), the above
doesn't work.

I made a simpler version of the example. Now it's just one image, no
Javascript, and text giving Javascript lines to execute in the address
bar to demonstrate the problem. Just to avoid distracting people with
other issues.

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

If that is too much of a pain, the just use a clip layer with
overflow: hidden; position: absolute, et c.

<div id="clipLayer">
<div id='content'>lots of large contents...</div>
</div>

I didn't follow this part and how it might help. Are you saying a
class-defined clip rect on a DIV would be accessible to Javascript where
the same thing on an IMG would not be?

Garrett

 

[Chris Riesbeck]

Actual clip value in the rendered page would involve runtimeStyle in
IE 6+ and document.defaultView in DOM 2 compliant browsers.

I simplified the demo file to just have the image, stylesheet, and text
showing the Javascript one-liners that don't work for me in IE and
Safari. Still at

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

The defined CSS class would refer to the declaration in the stylesheet
and here, that is accessible in IE 6+ and DOM 2 CSS compliant
browsers.

Thanks. I thought there was some way to get to the stylesheets
themselves but failed to find the relevant W3C pages when searching
yesterday.

Since my pages will appear in contexts with many other stylesheets, and
I won't know which one my rule is in, I have to search the selector
texts in all the rules in all the stylesheets. I've written a loop to do
that, but it's not as general as real CSS rules on what selectors it
recognizes as relevant, and it doesn't combine multiple rules like real CSS.

Still, it seems like the only way to go that works reliably across more
than 2 browsers.

Thanks again for the time and effort and valuable pointers.

E.g.:

if(document.styleSheets)
{
if("cssRules" in document.styleSheets[0]) // DOM 2 Stylesheets
compliant
{
alert("document.styleSheets[0].cssRules[0].style.clip = " +
document.styleSheets[0].cssRules[0].style.clip);
}
else if("rules" in document.styleSheets[0]) // IE 6+
{
alert("document.styleSheets[0].rules[0].style.clip = " +
document.styleSheets[0].rules[0].style.clip);
};
}
else
{
alert("This script requires support for accessing the list of
stylesheets. Javascript support enabled is required too.");
};

Use of alerts here is just to render data. The whole thing can be made
a lot more dynamic, in real-time, even mouse-interactive-driven.

The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

From its class declaration in the local (embedded) stylesheet, it can
be made accessible by javascript+DOM: I'm sure of this. 100% sure,
even for IE 7+.

Typo in the toy code. I'm surpised Tidy (as invoked by HTML-Kit) didn't
catch this. Thanks.

I use the 18 June 2008 version of HTML Tidy
(downloadable here:
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
).

The precise setting is
join-styles and it is ON by default:
"
join-styles
Type: Boolean
Default: yes
Example: y/n, yes/no, t/f, true/false, 1/0

This option specifies if Tidy should combine styles to generate a
single new style, if multiple style values are detected on an
element.
"
http://tidy.sourceforge.net/docs/quickref.html#join-styles

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style, and that, whichever
was done, Javascript could access.

Hmm... you want
- to be able to access the declarative rule in the local stylesheet
- to be able to modify (set) clip property chosen by the author
- to be able to access (get) the inline style chosen by the author

I'm sure all this is doable in IE 6+. For the declarative rule in the
local stylesheet in IE 6+, you need to use

document.stylesheets[0].rules[0].style.clip

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

It's doable. Sure of this.

I just do not have time right now to "play" with your webpage and to
examine more carefully your variables (rawStyle, compStyle) and
functions with your webpage.

Regards, Gérard

 

[Chris Riesbeck]

One example of such capability to create a mouse-interactive DHTML
driven demo on clip which will work even for IE 6:

http://www.gtalbot.org/DHTMLSection/DynamicClipDemo.html

as the clip property cropping the vertical and horizontal lines (which
in fact are the borders of <div>s) is set by the mouse coordinates
within the browser window viewport in real-time.

That's a neat effect. But as far as I can see, you only *set* the clip
rectangle. You don't try to use an existing clip rect created by a class
style rule.

The actual application I'm doing is yet another "magnifier." The current
demo is here

http://www.cs.northwestern.edu/~riesbeck/demo/magnifier_v2/magnifier.html

The bit I was trying to improve was the "custom magnifier size" option,
specifically the way to change the default size.

From reading your post and examining your webpage, maybe... just a
hunch... you want to achieve what these webpages have been talking,
explaining...:

Creating Thumbnails Using the CSS Clip Property
http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Misunderstood CSS Clip
http://www.ibloomstudios.com/articles/misunderstood_css_clip/

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug33
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug18

Regards, Gérard

Thanks for the links.

 

[Chris Riesbeck]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaultView.getComputedStyle().

[...]
IE 7 and IE 8 final version will not support document.defaultView nor
getComputedStyle method.

How can you know this about IE 8 when it is still beta 1?

It works there. You must be doing something wrong.

I assume you're replying to me, not Gerald. And I'd love to find out
that I'm doing something wrong. As I've just posted in this thread, the
current demo of the problem is at

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

and when I try executing

javascript:alert(document.defaultView.getComputedStyle(document.images[0],
null).clip)

in Safari (Windows and Mac) I get nothing. It works fine in Firefox and
Opera. I don't know to make the example any simpler.

Your signature delimiter is still borken,

Still? I hadn't noticed a previous comment about that.

which is why your signature is not
recognized

Recognized by what?

and might be regarded as spam (due to the URIs in it). The
delimiter must be dash-dash-space-CR-LF.
OK

I suggest not to use signatures
with Google Groups, and better not to use Google Groups for posting in the
first place, for the number of serious flaws of its Web interface.

I don't use Google Groups (except to search archives). I use Thunderbird
as my reader and News.Individual.Net as my server.

 

[SAM]

Chris Riesbeck a écrit :

But my goal was to access the actual clip value in effect, including
that defined by a CSS class. The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

function modifClip(nber) {
document.images[nber].style.clip = 'rect(30px 200px 100px 30px)';
}

And if the "goal is to get the clip style, the easiest way is to have
the style in attribute of the element to re-style.
(inline style)

<img src="test.gif" alt=""
style="clip: rect(5px 400px 220px 5px);">


function modifyClip(nber) {
var clip = document.images[nber].style.clip;
clip = clip.replace(/[A-Za-z\(\)]/g,'').split(/[^0-9]{1,2}/);
document.images[nber].style.clip = 'rect('+clip[0]*.5+'px '+
(clip[1]-50)+'px '+
(clip[2]-20)+'px '+
'30px)';
}

Tested in Firefox and Safary (but not in IE)

With :
clip: rect(5px 400px 220px 5px);
Firefox adds himself ',' to get :
clip: rect(5px, 400px, 220px, 5px);
while Safary.3 doesn't.

My actual application needs XHTML

So, no style attribute in tags, no ?

inline works fine, but the goal was to have a default clip rect that
page authors could override with an inline style,

that is absolutely possible

and that, whichever was done, Javascript could access.

I'm currently storing the default clip rect in a Javascript string. I'd
prefer to have authors be able to change the default in the CSS
stylesheet, but given my experience with Safari (Windows and Mac) and
IE, that seems like a lost cause.

rien compris !
what doesn't work ?
You want to change a JS instruction using CSS ?
Really ?

 

[Chris Riesbeck]

Chris Riesbeck a écrit :

But my goal was to access the actual clip value in effect, including
that defined by a CSS class. The clip rect from the class is clearly
applied, it just doesn't seem to be accessible to Javascript.

function modifClip(nber) {
document.images[nber].style.clip = 'rect(30px 200px 100px 30px)';
}

And if the "goal is to get the clip style, the easiest way is to have
the style in attribute of the element to re-style.
(inline style)

<img src="test.gif" alt=""
style="clip: rect(5px 400px 220px 5px);">

Which doesn't meet the goal of getting the clip rect when it's defined
in a class. I know how to do it when it's defined inline.

that is absolutely possible

Not from what I've tried so far, as documented in previous postings and
this demo file:

http://www.cs.northwestern.edu/~riesbeck/demo/clip-demo.html

I'm hoping I have some simple error in CSS or Javascript. Thanks to
Gerard, I have a workaround that accesses the stylesheet objects, but
it's not as general or robust.

rien compris !
what doesn't work ?
You want to change a JS instruction using CSS ?
Really ?

No, I just need an initial default clip rect -- really just it's width
and height -- that JS can use. See the magnifier demo:

http://www.cs.northwestern.edu/~riesbeck/demo/magnifier_v2/magnifier.html

 

[Chris Riesbeck]

I have an image with a class and the class defines a clip rectangle.

In Firefox 2 and 3, and Opera 9, I can access the rectangle with
document.defaultView.getComputedStyle().
[...]

But that doesn't seem to work in Safari for Windows 3,

It works there. You must be doing something wrong.

I assume you're replying to me, not Gerald.

Apologies - I meant Gerard.