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