The Web Tutorials

New Window :: Browser Compatibility :: OnMouseOver :: OnMouseOut :: OnClick :: Further Resourses ::

Chapter Index

Introduction
History
Getting Connected
Browsers
Copyright
Search Engines
HTML
Linking documents
Images
Newsgroups
Tables
Forms
Frames
Photoshop
Page and Site Design
Publishing
Javascript
Free Stuff
Styles
DHTML
On-line Shopping
Internationalism
Advertising
Forums and Chat

Introduction

Javascript is a programming language that was invented by Netscape, and is used extensively to program events within the browser windows. Thus, should you move your mouse over an item, you can program the browser to react in certain ways to that action, in short, you initiate an event within the browser window.

There is a whole language to learn, but for the moment we will concern ourselves only with a few basic routines:

• Opening a new window
• Checking for browser and version
• OnMouseOver
• OnMouseOut
• OnClick

Opening a New Window

Usually one seeks to open a new window by clicking on a link and that link being followed will cause the new page to load in the existing window. One can always seek to have it load in a new window by adding an extra parameter to the link code. Remember that adding a TARGET to the link reference will direct the new page wherever you choose, either to the same window, to a different frame, or to a new window.

You may wish to order things slightly differently. You may wish to have a specifically sized window open to display some item from your own site, maybe a map, or just a short paragraph. You won't want to produce a whole page, and you may want to control whether this window has directory buttons, scrollbars, and the like.

You can do all this with a simple piece of javascript code. In fact there are two ways you can do it. First, create a function, give that function a name, and then define it. All of this goes in the HEAD. Later in the BODY you can call that function.

The code below is an example of the creation of the function in the HEAD of your page. Put it after the TITLE.

First you tell the browser what language this is (JavaScript), and note the spelling and capitalisation. Then name your function. I have called this one "crackers()". I have defined it as a function which will open a new window containing the page 'crackers.html'. I have also defined how I want that window to display. You will note that all the accoutrements are in the 'off' position as we won't be needing the directory buttons and location bar, etc. I have allowed resizing and scrollbars, but have also defined the size of the window in pixels. Note the various quote marks, commas, semi-colons, and braces.

function crackers() {open('crackers.html', 'JokesCrackers', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbar=yes,resizable=yes,copyhistory=no,width=350,height=150');}

You will need to call this function somewhere in the body of the text. When you would normally use the HREF tag to open a new link you can instead call this JavaScript function:

<A HREF="javascript:crackers()" TARGET="">Jokes from Christmas crackers</A>

When someone now clicks on the text "Jokes from Christmas crackers" the Javascript function will leap into action and open the new window that you have previously defined.

A simpler way of doing this is to use the JavaScript command language. You need to use the 'Open' command. To show that it is a reserved command word we place a fullstop in front of the word open.

Re-writing the above code we would not need to define the function in the HEAD of the page at all, but merely call the Open command in the BODY at the point at which we need to display our link in a new window. Thus the second part of the text in the previous example would be written as follows:

<A HREF="#" onClick="window.open('crackers.html','JokesCrackers', 'width=350,height=150 toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbar=yes,resizable=yes,copyhistory=no')"> Jokes from Christmas crackers</A>

Note the so-called 'nowhere tag' after the HREF. The reference is calling the JavaScript command, not a URL. The JavaScript command then itself directs the browser to the correct URL.

Having created a new window which does not look like the normal browser window, you will find it doesn't behave quite like the normal window either. It has a nasty habit of not closing when you leave it, and when you recall it you find nothing happens. The window is open, but underneath whichever other windows may also be open.