Using a Hyperlink
First of all consider the regular hyperlink…
This link will open in a new window created by HTML.
Here’s the code…
<a href="testwindow1.htm" target="_blank">new window</a>
Try it out. It opens a page containing a picture and a hyperlink to close it.
You will notice that, using this simple method, the window opens at its default “restore” (i.e. not maximized) size with all its toolbars and other bits and pieces.
Here the code is a bit more complicated…
Although the text “new window” seems to be a hyperlink it isn’t. It just looks and behaves like one. The text is enclosed not by the usual <a> tags but by <span> tags. These and the similar <div> tags are used to mark areas of the page that aren’t unique in any other way, in this case a few words inside a paragraph, so that they can have attributes applied to them. In this case some formatting to color the text blue and make the mouse cursor display a hand when it is over the text (Find out how to do this!).
I wanted it to look like a hyperlink because it was going to behave like a hyperlink. I couldn’t actually use a hyperlink because of what was going to happen next…
This is where you get to be creative with your windows. Here’s what the various bits mean…
“URL”: This is the address of the page that you want to open in the new window.
“name”: This is a name of your choice. The purpose of providing a name is that you can then refer to it elsewhere. You might want a subsequent hyperlink to open in the same window you just created, replacing the earlier page. Your user doesn’t have to shut down each window when they have finished with it. They just switch back when its contents change. You can leave out the name if you like, just type empty quotes: “”.
“attributes”: These are a set of instructions that tell the browser how to display the window. In the above example I have used toolbar=no which, when used alone tells the browser to open a basic window without toolbars, scroll bars, status bars etc. I have also specified an exact size by including width=250 and height=250, the numbers referring to pixels.
|menubar||Specifies whether or not to display a menu bar at the top of the window.Value = yes or no, 1 or 0.|
|toolbar||Specifies whether or not to display the main toolbar (with the back, forward, stop etc. buttons).Value = yes or no, 1 or 0.|
|location||Specifies whether or not to display the location bar (the Address Bar in Internet Explorer) – where URLs are typed and displayed.Value = yes or no, 1 or 0.|
|directories||Specifies whether or not to display any additional toolbar (e.g the Links Bar in Internet Explorer).Value = yes or no, 1 or 0.|
|status||Specifies whether or not to display the status bar at the foot of the window.Value = yes or no, 1 or 0.|
|scrollbars||Specifies whether or not to display the horizontal and vertical scrollbars that normally appear when the page content is larger than the screen.Value = yes or no, 1 or 0.|
|height||Specifies the height of the window in pixels.Value = number|
|width||Specifies the width of the window in pixels.Value = number|
|left||Specifies the distance in pixels of the new window from the left edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenX).Value = number|
|top||Specifies the distance in pixels of the new window from the top edge of the screen. (This applies to Internet Explorer. For Netscape Navigator use screenY).Value = number|
|resizable||When enabled, allows the user to manually resize the window by dragging its edges or corners.Value = yes or no, 1 or 0.|
|fullscreen||When enabled causes the window to open in full-screen mode (Internet Explorer only.)Value = yes or no, 1 or 0.|
You will find that when, for example, you specify toolbar=no that other objects (location, menubar, scrollbars etc.) get switched off too. If you want to see any of them in your new window you will have to ask for them specifically.