A
Arnaud Diederen
Hello everyone, and happy new year to all c.l.j'ers!
No bad code to post, just a question.
I wrote a JavaScript application that lets users view an image, and
zoom on it.
The way I "zoom" is pretty simple, really (I hope that your
newsreaders displays text with a monospace font..) :
Original image:
+-------------+ <=- <img>, absolutely positionned
|.....''''''''| inside a <div style="overflow:hidden;">
|.....' '<=- The user zooms that area
|.....''''''''|
+-------------+
Zoomed image (x2):
+-------------------------+ <=- <img>
|ooooooooooooooooooooooooo|
|ooooooooo+-------------+ <=- <div>
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo+-------------+o|
|ooooooooooooooooooooooooo|
+-------------------------+
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.
That works pretty fine, except that:
1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup
2) If the user zooms a very small area, the <img> has to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That's
... bad.
----
What I'd like to do:
Give the user a zoomed-in version of the image, without using a
re-scaling hack.
How would you do that? Does anyone know what would be the best method
to do it?
It must be working in IE and FireFox. I can use any technology that's
available with these browsers, as long as it's scriptable with
javascript.
Any idea can help!
Thanks, and best regards
Arnaud
No bad code to post, just a question.
I wrote a JavaScript application that lets users view an image, and
zoom on it.
The way I "zoom" is pretty simple, really (I hope that your
newsreaders displays text with a monospace font..) :
Original image:
+-------------+ <=- <img>, absolutely positionned
|.....''''''''| inside a <div style="overflow:hidden;">
|.....' '<=- The user zooms that area
|.....''''''''|
+-------------+
Zoomed image (x2):
+-------------------------+ <=- <img>
|ooooooooooooooooooooooooo|
|ooooooooo+-------------+ <=- <div>
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo|ooooooooooooo|o|
|ooooooooo+-------------+o|
|ooooooooooooooooooooooooo|
+-------------------------+
And now, with words: I re-scale the <img>, re-position it in the
<div>, and let the overflow:hidden clipping do the rest.
That works pretty fine, except that:
1) The interpolation is, of course, linear, giving some hard-to-read
pixel soup
2) If the user zooms a very small area, the <img> has to be re-scaled
by a possibly big factor. In both FF and IE, that can eat up a lot
of memory (too much, actually, crashing the browser). That's
... bad.
----
What I'd like to do:
Give the user a zoomed-in version of the image, without using a
re-scaling hack.
How would you do that? Does anyone know what would be the best method
to do it?
It must be working in IE and FireFox. I can use any technology that's
available with these browsers, as long as it's scriptable with
javascript.
Any idea can help!
Thanks, and best regards
Arnaud