Hi guys,
I have a form where users are required to input a link to their site. In order to confirm the url is correct, I have an IFRAME in the next column. When the user enters the URL, I load the page into the IFRAME. The problem I'm having is that the page is showing fullsize in a small window (therefore scroll bars appear).
What I would like to do is to scale down the image of the page so it fills the IFRAME, like a thumbnail. I've seen this sort of thing done.
Can anyone help please?
Cheers,
Nap
I found this on another site (http://forum.java.sun.com/thread.jspa?threadID=709683&messageID=4108371), but it seems specific to Internet Explorer. Anyone able to make this work with Firefox?
I'm not sure about any policy concerning posting URLs to other site, so my appologies in advance.
Cheers,
Nap
shamphone:
Here is the way i am used in my project(CMS project). But it is impl in the client with filter.
I use iframe tag to load the page , then apply filtering on the iframe:
<style>
.previewFrame{cursor:hand; width:800px;border:8px solid #ccc;height:600px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.25,M22=0.25,SizingMethod='au to expand');}
</style>
<iframe scrolling="no" frameborder="0" src="page.html" class="previewFrame"></iframe>
But the effect is not so pretty.
kenrodd:
shamphone's approach is quite brilliant!
It has numerous advantages (such as consistency with the user's browser, making the client machine do all the work, etc.) and only a few disadvantages (IE-specific, a bit fragile, etc.)
I thought I would point out you can fix the 'not so pretty' problem simply by applying two filters instead of one...
<style>
.previewFrame{cursor:hand; width:800px;border:8px solid #ccc;height:600px;filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.6,M22=0.6) progid:DXImageTransform.Microsoft.Matrix(M11=0.75,M22=0.75);}
</style>
<iframe scrolling="no" frameborder="0" src="page.html" class="previewFrame"></iframe>
...the Microsoft.Matrix uses bilinear resampling by default, and you shouldn't try to bilinear sample more than 0.6 or so in any one filter.
The code above produces a lovely, anti-aliased thumbnail.