• FrontPage Index
• Take a look at the original article in my Casebook.

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

Making a Browser Window Fit an Image

Displaying an image on its own is a simple matter. You simply hyperlink to the image file and when your visitor clicks the link their browser displays the image. But it isn't the best way to show off your images.

What they see is this...	When you'd rather show them this...

This task has puzzled me for quite a while. I published a solution some time ago but, for a reason I still can't figure out, it didn't work consistently so I withdrew the tutorial until I could find a reliable method. You can still read my original article (follow this link), most of which is still relevant. I had decided to give up and admit that it had beaten me when, out of the blue, I had one of those "light bulb over the head" moments. Here's what I came up with...

Hyperlinking to Images

You want to display an image in a window of it's own, so you supply a link to the image that your visitor has to click to see it. Perhaps you use a thumbnail of the image as a link, or maybe just a text link will do, like this...

I've coded the links to open the image in a new window by adding target="_blank" to the link's HTML. When you have finished looking at the image click the window's close button to return to this page.

First a thumbnail image as a link:

And now a text link:

Here is a picture of hazel catkins in early spring.

The code for both of these methods is very simple and FrontPage will do it all for you. The code for the thumbnail link looks like this:

<a target="_blank" href="yourimage.jpg"> 
<img border="1" src="yourthumbnail.jpg" width="75" height="112"></a>

The code for the text link looks like this:

<p>Some text<a target="_blank" href="yourimage.jpg">your link text</a></p>

So, What's the Problem?

There are several disadvantages to having a simple link to an image. The result of linking direct to an image looks like this:

Now for some of the things I don't like about it...

• The image is displayed on the left side of the window. You can't tell it where to appear.

• The image is shown against a white background. You can't change it to a more appropriate colour.

• It's just a regular browser window with toolbars you don't need.

• Even though I sized my image to fit an 800x600 screen the space taken by the unnecessary toolbars push it down so that the bottom of my picture is cut off.

So, What's the Solution?

The answer is to open the image in a custom window. With a bit of JavaScript you can specify the size of your window and tell it that you don't want those unnecessary toolbars (you can read more about custom windows in my tutorial Creating a New Window with JavaScript).

You know how big your image is, so you can specify that the window is the same size. Click the thumbnail below and you'll see...

...but where did that white border come from? The code seemed to make sense - it went something like this:

<img border="1" src="yourthumbnail.jpg" width="75" height="112" 
 onclick=javascript:window.open("yourimage.jpg","blank", 
 "toolbar=no,width=300,height=450") style="cursor:hand">

Note that I added style="cursor:hand" to the code because only proper HTML links automatically prompt the "hand" cursor to appear.

But I now have a new problem! even though I specified that the new window should be the exact same size as my image, the image is offset down and to the right and a white border appears along the top and left edges of the window.  This has happened because, by default, Internet Explorer displays its content with a 15 pixel top margin and a 10 pixel left margin (and no, I don't know why that is, you'll have to ask Microsoft!).

Try Again!

I can tell the browser to display its content with a zero pixel margin, but only if that content is an HTML page. I can't use the same sort of code as in the previous example because in that instance a page is not being displayed, it's just using the browser as an image viewer, and there's nowhere for the code to go.

My solution is to create a page on which to display the picture (and nothing else). The HTML code of the page can contain an instruction to the browser to display it with top and left margin settings of zero. But here comes the clever bit! I want to avoid having to create and save a separate page for each of my pictures. Instead, I am going to create a JavaScript function that will open a window and create an HTML page on the fly. This page will only exist when it is displaying an image and it won't ever get saved.

"But that's what you did before and it didn't work!" I hear you cry. True... that was the basis of my previous attempt. But, for a reason I've never figured out, it worked only intermittently. What I have done this time is to use my image as the background of my new page, not as an object to be displayed on the page.

Here's my function:

<script language="javascript" type="text/javascript">
<!--
function DisplayImage(picURL,picWidth,picHeight){
newWindow=window.open(picURL,'newWin','toolbar=no,width='+picWidth+',
   height='+picHeight)
newWindow.document.write('<html><head><\/head><body background=
   "'+picURL+'"><\/body><\/html>')
newWindow.resizeBy(picWidth-newWindow.document.body.clientWidth,
   picHeight-newWindow.document.body.clientHeight)
newWindow.focus()
}
//-->
</script>

How Does it Work?

The first line of the code declares the name of the function and lists its arguments. The "arguments" are pieces of information that the function needs to do its job:

function DisplayImage(picURL,picWidth,picHeight){

DisplayImage is the name I gave the function (function names should make sense!).
picURL is the name and location (i.e. the URL) of the image to be displayed.
picWidth is the width in pixels of the image to be displayed.
picHeight is the height in pixels of the image to be displayed.

The next line declares an object that I have named newWindow and tells the browser that it must create this object by opening a window:

newWindow=window.open(picURL,'newWin','toolbar=no,width='+picWidth+', 
          height='+picHeight)

newWindow.document.write('<html><head><\/head><body background= 
         "'+picURL+'"><\/body><\/html>')

newWindow.resizeBy(picWidth-newWindow.document.body.clientWidth,
   picHeight-newWindow.document.body.clientHeight)

newWindow.focus()

Follow this link to see the code for the completed function.

Step 2: Create the Link

The link you are going to create is much like a regular hyperlink except that instead of simply specifying a file to display, it is going to "call" the JavaScript function. You need to supply the three pieces of information (the "arguments") that the function needs:

picURL i.e. the path to the full-sized image (remember to supply the proper web path and not the local path on your hard disk. FrontPage converts regular hyperlink paths for you but it doesn't do it for JavaScript).

picWidth and picHeight i.e. the width and height of the full-sized image in pixels.

If you are using a thumbnail image as your link to the full-sized image you code should look something like this:

<a href="javascript:DisplayImage('yourimage.jpg','300','450')">
<img border="1" src="yourthumbnail.jpg" width="75" height="112"></a>

A text link is much the same, and should look something like this:

<a href="javascript:DisplayImage('yourimage.jpg','300','450')">
your link text</a>

Additional Refinements

Add a Window Title

You can make your window look a little more professional by replacing the usual title text (normally the URL of the file being displayed) with some descriptive text of your own...

This requires the addition of another argument to the function (I've called it picTitle) which requires some minor modification to both the function code and the link. Here is what the new function looks like (the additions are marked in red):

<script language="javascript" type="text/javascript">
<!--
function DisplayImage(picURL,picWidth,picHeight,picTitle){
newWindow=window.open(picURL,'newWin','toolbar=no,width='+picWidth+',
   height='+picHeight)
newWindow.document.write('<html><head><title>'+picTitle+'<\/title>
   <\/head><body background="'+picURL+'"><\/body><\/html>')
newWindow.resizeBy(picWidth-newWindow.document.body.clientWidth,
   picHeight-newWindow.document.body.clientHeight)
newWindow.focus()
}
//-->
</script>

Your link text needs to be modified to include the additional information:

<a href="javascript:DisplayImage('yourimage.jpg','300','450','your title')">
<img border="1" src="yourthumbnail.jpg" width="75" height="112"></a>

Pre-load the Images

Image files can be large and may take a while to download but you can speed things up for your visitor by including a few lines of JavaScript to pre-load the images. As soon as your main page loads and the browser reads the JavaScript code it starts to download the specified images to the its cache (your Temporary Internet Files folder in the case of Internet Explorer). As your visitor is reading your page the image files are downloading in the background so they are less likely to have to wait when they click your link.

Here is the code that pre-loads the images for this page:

<script language="javascript" type="text/javascript">
<!--
image_1 = new Image()
image_1.src = "../images/fptut17a.jpg"
image_2 = new Image()
image_2.src = "../images/fptut17b.jpg"
image_3 = new Image()
image_3.src = "../images/fptut17c.jpg"
//-->
</script>

Two statements are required for each image. The first line tells the browser it needs to get an image (I've called them image_1, image_2 etc. but you can call them what you like). The second line tells the browser exactly where to get the image file from.

Customize the Status Bar Message

The browser normally displays the details of a hyperlink in the status bar at the bottom of the browser window. When the hyperlink includes details of a complicated function this can look untidy. You can replace the standard status bar message with your own or simply remove it completely:

Point at the two thumbnail images below and notice the difference. The one on the left shows the standard link data. The one on the right shows a custom message.

It requires an additional statement in the link code (the additions are marked in red):

<a href="javascript:DisplayImage('yourimage.jpg','300','450')">
<img border="1" src="yourthumbnail.jpg" width="75" height="112" 
onmouseover="window.status='your message';return true" 
onmouseout="window.status='';return true"></a>

It is important to include the onmouseout statement to remove the message when the visitor moves their mouse away from the link. This clears the status bar by setting it's value to ' ' (i.e. nothing).

If you don't want to display a custom message, but simply want to prevent the link text from displaying you can use the onmouseover statement to set the status bar value to ' ' and omit the onmouseout statement.

Point at the two text links below and notice the difference. The one on the left shows the standard link data. The one on the right shows a blank status bar.

|   Michaelmas Daisy   |   Michaelmas Daisy   |

The code for a text link looks something like this:

<a href="javascript:DisplayImage('yourimage.jpg','300','450')"
onmouseover="window.status='';return true">your link text</a>

Watch it Working...

Finally, some working examples. This function has the advantage that only one window gets opened regardless of how many images the visitor chooses to view. Each image re-uses the original window so the visitor doesn't end up with lots of browser windows open. The real scoop is that the window changes shape and size to match the image.

Here are some text links:

|   Michaelmas Daisy   |   Hazel Catkins   |   Goat Willow   |

Here are some thumbnail links:

Will It Work in Netscape?

I doubt it. But then I'm not a great fan of Netscape for that very reason. Grrr!