Maximizing and Restoring Images in a Tabular Database Form in HTML

You may be familiar with the operation of this method. When you click an image, a new window appears with the maximized image. That is basically it. Our design steps are as follows:

• Give the File Input element an onclick event.

• When the element is clicked, a function is called that opens a new window with an image tag having the original large-sized image. There is also a title for the new window.

The DOM statement to open a new window is:

newWindowReference = window.open(URL,name,specs,replace);

The parameters that the “open” function takes are all optional. In our project, we use only the “specs” parameter to give the dimensions of the new window; we have

open('','','width=270,height=320','')

The width is given as shown, followed by a comma and then the height. Each of the other arguments here are empty strings. For these, it is the default value that is in effect.

When you open a window using just the above statement, the window is blank. This is because there is no HTML tag inside. You then have to write HTML tags from the parent window to the opened window. The image tag is written to the window as follows:

imageWindow.document.write(imageTag);

where imageTag is a string containing the image tag and all its attributes.

Write the path to the source of the image file in full, even if the image file is in the same source as your HTML file. If you do not do this, the image may not appear in your new window.

The following code segment prepares the title and an image tag and then writes them to the opened window.

var titleStr = ‘<title>Full Sized Image</title>’;

var imageTag = '<img src="Full path to image file" />';

imageWindow=window.open('','','width=270,height=320','');

imageWindow.document.write(titleStr);

imageWindow.document.write(imageTag);

Note: to have a good large-sized image, either with this method or the previous method, the image you show as the maximized image should be the original image you got from the scanner or digital camera. Any small image should be this one whose CSS dimensions have been reduced. In this way, your different-sized images will have good resolution.

This is the JavaScript code that is called when you click a File Input element.

<script type="text/JavaScript">

//function to open new window with the full picture

function openWindow(imageFile)

{

//form the title tag

titleStr = "<title>Full Sized Image</title>";

//form the image tag

imageTag = '<img src="c:/For CD/March Articles 2008/Database Forms with HTML - Part X & XI/' + imageFile + '" style="border-width:0px; width:250px;height:300px" />';

imageWindow=window.open('','','width=270,height=320','');

imageWindow.document.write(titleStr);

imageWindow.document.write(imageTag);

}

</script>

To try the code, replace the full path I have given above with the path to the images in your computer.