width and height control of image inside iframe

[coolsti]

I need some help here. I am making an application which allows a user to
look at a series of picture files one at a time, and enter the outcome of
various visual tests to a database. The application is based on mysql and
php on a remote server, and is accessed by the user via a web browser,
primarilly IE.

The image file names are built up by the server side php scripts, and so a
URL for the image file is created, but the file itself is located on a
local drive on the client machine (DVD drive). So the server side php has
no access to the picture files.

I made version 1 of this application with the test input fields and
buttons to switch to next images, etc., on a main browser page, and used
window.open to open the image file in a pop up window. This works fine,
using the correct link, e.g. staring with 'file://localhost/D:/ etc.'.

But this is irritating because the input field and the image to inspect
are on two separate windows - I would like to integrate them into one
window.

I am now trying to do this with an iframe to hold the image. Again this
works in that I can load different images via javascript by changing the
location.href property of the iframe, and again using a link as above.
However, I do not have any control of the size of the iframe, which does
not match the size of the image.

Is there any way to get control of either the size of the image? For
example to have the image loaded into the iframe but scaled to the size of
the iframe?

Or is there a way via javascript once the page is on the browser to
control the size of the iframe?

Getting a hold of iframe properties is confusing to me. I change the
location using

window.frames['ifrm2'].location.href = link;

where ifrm2 is the name given to the iframe and link is a variable set to
the url, e.g. 'file://localhost ....'. But how do I get a hold of the
width or height? Microsoft talks about using something like
document.all. as a starter, but nothing I try lets me get access.

Thanks for any help!
steve, Denmark

[RobB]

coolsti wrote:

I need some help here. I am making an application which allows a user to look at a series of picture files one at a time, and enter the outcome of various visual tests to a database. The application is based on mysql and php on a remote server, and is accessed by the user via a web browser, primarilly IE.

The image file names are built up by the server side php scripts, and so a URL for the image file is created, but the file itself is located on a local drive on the client machine (DVD drive). So the server side php has no access to the picture files.

I made version 1 of this application with the test input fields and
buttons to switch to next images, etc., on a main browser page, and used window.open to open the image file in a pop up window. This works fine, using the correct link, e.g. staring with 'file://localhost/D:/ etc.'.
But this is irritating because the input field and the image to inspect are on two separate windows - I would like to integrate them into one
window.

I am now trying to do this with an iframe to hold the image. Again this works in that I can load different images via javascript by changing the location.href property of the iframe, and again using a link as above. However, I do not have any control of the size of the iframe, which does not match the size of the image.

Is there any way to get control of either the size of the image? For
example to have the image loaded into the iframe but scaled to the size of the iframe?

Or is there a way via javascript once the page is on the browser to
control the size of the iframe?

Getting a hold of iframe properties is confusing to me. I change the
location using

window.frames['ifrm2'].location.href = link;

where ifrm2 is the name given to the iframe and link is a variable set to the url, e.g. 'file://localhost ....'. But how do I get a hold of the
width or height? Microsoft talks about using something like
document.all. as a starter, but nothing I try lets me get access.

Thanks for any help!
steve, Denmark

If you want to 'integrate them into one window' you probably don't want
to use an iframe, which *is* a window, albeit an embedded one. A more
logical approach would be to use a simple DIV element, setting its CSS
background-image and sizing it appropriately. Roughly...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

div#frame {
position: relative;
width: 600px;
height: 460px;
font: 16px "arial black";
color: purple;
text-align: center;
margin: 10px auto;
}
div#display {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}

</style>
<script type="text/javascript">

function loadBG(url)
{
if (!/\.((jpe?g)|(gif)|(png))$/.test(url))
{
alert('Not a valid image file.');
return false;
}
var filepath = 'file://localhost/D:/' + url;
var pic = new Image();
pic.onload = function()
{
var f, d, str = 'url(@) black no-repeat top left';
if ((f = document.getElementById('frame'))
&& (d = document.getElementById('display')))
{
f.style.width = d.style.width = this.width + 'px';
d.style.height = this.height + 'px';
d.style.background = str.replace(/@/, this.src);
d.style.border = 'thin black solid'; //add border
}
}
pic.onerror = function()
{
var f, d;
if ((f = document.getElementById('frame'))
&& (d = document.getElementById('display')))
{
d.innerHTML = 'Oops...image not loaded.';
f.style.width = d.offsetWidth;
}
}
pic.src = filepath;
return false;
}

</script>
</head>
<body>
<form>
<input type="file" onchange="loadBG(this.value)">
</form>
<div id="frame">
<div id="display"></div>
</div>
<p style="width:600px;margin:10px auto;font:10px arial;">
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah
</p>
</body>
</html>

Positioning the DIV absolutely keeps the layout from jumping when its
size is altered - the outer ("frame") DIV is inflow <position:
relative> to keep things centered. Earlier Mozilla builds had problems
with File.onchange but FF/NS handle it now; iirc Safari had a problem
too but, could be mistaken.

hth

[coolsti]

If you want to 'integrate them into one window' you probably don't want
to use an iframe, which *is* a window, albeit an embedded one. A more
logical approach would be to use a simple DIV element, setting its CSS
background-image and sizing it appropriately. Roughly...

Hi hth,

thanks for your tip and code. I will look at it, and it may be a better
solution than what I came up with, as it allows anchoring of the image.

In the meantime, I sort of discovered that I could just do what I wanted
using an ordinary IMG tag. I thought for some reason that this would not
allow me to specify an image on the client DVD drive (or some other
non-server-reachable drive), and it doesn't if I use Firefox, but with IE
it works.

So what I do now is simply use an IMG tag, and use javascript to change
the width and height of the image, keeping the correct aspect ratio.

A DIV element will certainly give me more control, though.

Regards,
Steve

[coolsti]

On Sat, 14 May 2005 10:08:48 +0200, coolsti wrote:

A DIV element will certainly give me more control, though.

Hi hth if you are still reading this thread.

I tried what you suggested, with a frame div and a display div with the
image as a background. This does almost what I want to do, but not
completely.

I am instead trying to use the frame div to anchor the image at a certain
location and with a fixed height and width, but am showing the image
within this div (or within another div if needed) as an image tag. This
lets me also let the user use some buttons to interactively change the
size of the image larger or smaller, where in this case any overlap will
be hidden.

But I am thinking of implementing a zoom-in function, where in the case of
overlap (the image is larger than the frame div), it is not necessarilly
the right and bottom of the image which is cut-off. Instead, I will give
the user a way to increase the size of the image but also move it around
within the frame. I tried doing this by changing the top and left values
of the inner div (holding the image tag) but this doesn't seem to work.

Do you know how I can implement this? Either by controlling the image's
position within the frame div, or the position of a display div within the
frame div?

Thanks for any help,
Steve