multiple windows

why do this?

So far, everything you've found out to do has worked with one crucial limitation - no matter where you go, what you open and how glorious it looks on the eye, it's all taken place within one window. By now, however, you've surely noticed that this site often delivers its information through two separate windows: the main one, and the "sample" window where many of the sample sites, and external links, open up. How is this done? There are two ways, one simple, one trickier but more sophisticated. Both are described on this page. The simple way is through the target attribute; the more complex way through the use of a JavaScript event.

Please remember the discussion in the virtual lecture regarding how and when to do it. Overdoing the opening of new windows can be pretty irritating for the user. It is always a good idea to warn the user that they are about to open a new window, or that a file will open in an already-open window instead of the current one. I try to do this as much as I can on this site and it is a good habit to get into.

Back to the top

the target attribute

This is the easy way. All you do is add a new attribute, target, into the <a> tag, as follows:

clicking on <a href="http://www.leeds.ac.uk/acom/"
     target="sample">this link</a>

target="sample" says to the browser that the intended destination (that is, the target) of this link is a browser window designated "sample". The important thing is that if no such browser window exists, the browser will open a new window, and give that window the specified name. Therefore, the first time you come across a link with target="sample" (or any other given name), it will cause a new window to open. On all subsequent occasions, as long as that window remains open, the link will work in that window rather than the original window.

Note that you can also specify target="_blank" (and yes, you do need the underline character). This always opens a new browser window. The disadvantage with target is that you get no control over the size or appearance of this new window - that can be achieved by using JavaScript, as shown next.

target also has an important role to play in the manipulation of links in frames - see that page for details.

Back to the top

new windows with JavaScript

The image map below is our old friend, the South America map from lecture 7, only now with a difference. Have a look at it and I'll run through the technicalities below.

This is done with another bunch of JavaScript onclick events, this time in the <area> tags. (Bear in mind this could be made a feature of any link, whether text or image. The event could equally well be placed in an <a> tag.) It looks a little complicated, but that's just because there are a lot of properties, giving you a lot of control over the appearance of the window. As with other similar events we've encountered so far, you can easily use it without knowing much about how JavaScript works.

As an example, here's Colombia's <area> tag. As on some other occasions, I have had to split this tag up to fit it on the screen, but please note that when and if you write such a tag yourself, the onClick event needs to be typed without spaces or line breaks. It might end up wrapping in Notepad because of the size of the window, but don't type any breaks.

<area shape="poly" alt="Colombia" href="#here"
  coords="20, 60, 57, 75, 66, 40, 38, 22"
  onclick="window.open('colombia.html','','width=500,height=530,
  left=100,screenX=100,top=100,screenY=100')" />

The shape, coords and alt attributes remain the same. However, the href attribute has been turned into a "dummy". The anchor called "here" is at exactly the same place as the map, so the browser does not move when the new window is opened. Be aware that now the opening of the new page is a separate thing to actually following the link; technically there's no reason why you couldn't open a new window and take the user somewhere entirely different in the existing window, which you couldn't do with target.

The opening of the new page is now provoked by the onclick event. window.open, the "event handler", is self-explanatory. Note the punctuation around the properties which follow; the order of the three "first-level" parameters (marked by the 'single quotes') also cannot be changed, though the order of the values within the third paramater can be.

The first paramater is the name of the file to be placed in the new window. This could be a URL for an external link. The second parameter - here left empty, but we still needed the quotes - would be the name of the window. Just as with the target attribute you can give a new window a name, and all subsequent references to that name will cause the link to open in the new window (the names of windows can be used in both this way and via target). There's clearly no point using special targets such as "_blank" here, however, as opening a new window is what we're doing anyway.

The third parameter contains a list of values which define the size and appearance of the new window. Some I've used in the example, but others I haven't - they are listed here as well so you can play around with them:

• width, height: the dimensions of the window in pixels. Remember that some space may be taken up by scroll bars, menu bars and so on.
• left, screenX, top, screenY: the distance of the top left corner of the new window from the top left corner of the screen, in pixels. There are two sets of attributes here because this is one of those irritating occasions where you need different attributes to do the same task in Netscape and IE. left and screenX are equivalent, defining the horizontal displacement of the window; top and screenY define the vertical placement.
• toolbar, menubar, scrollbars: in each case the default is no. Set to yes to give your window a toolbar, menu bar or scroll bars respectively. (Note the plural nature of the last one.)
• resize, resizeable. My web design book says you should use resize here but an ACOM student in 2001-2 (credit - Leo Seelig) pointed out that he could only get resizeable to work. Try both - it may be another browser inconsistency. Anyway, what it/they does/do is allow the user to resize the new window you've created. The default is no. It's probably best to always include this, as even though you might think you've defined the size of your new window very precisely, and why should anyone want to change it?, someone might always change the text size. If you do this with the new windows which open from the image map above, you'll see the problem with not including it.

I must say this one more time. Don't get too much into the habit of opening new windows willy-nilly. Remember that users can always do it for themselves, even with an ordinary link, and that the arrangement of the user's screen and desktop is always best left up to them. But where there's a point, well-used new windows can still provide a powerful impact.

Back to the top

Back to the menu for lesson 10