FrontPage 98 Tips

24/7 ad

Opening Links In Sized Windows

The following tip describes how you can create a link that will Open in a New Window using JavaScript.  There are three variations shown below.  You can use the onClick event or the onMouseOver event. The brackets [] indicate the optional entries.

The JavaScript used is in the form of:

  • onClick = [window].open("URL", "windowName", ["windowOptions"])
  • onMouseOver = [window].open("URL", "windowName", ["windowOptions"])
  1. Create your link like any other link.  You can use a Text link or a Graphic link.
  2. In HTML View edit the link and add one of the following after the <a href="URL" and before the > in the link.
    onClick = [window].open("URL", "windowName", ["windowOptions"]) for an onClick event.  onMouseOver = [window].open("URL", "windowName", ["windowOptions"]) for an onMouseOver event.

    NOTE: In the examples newwindow.htm is this page, and samplewindow.htm is the page opened in the New Window. You can replace onClick with onMouseOver to open a new window when the mouse passes over the link.

For a Text Example: New Window Link in HTML View change the HTML for the link:

From: <a href="newwindow.htm" >New Window Link</a>
To: <a onClick="window.open('newwindow.htm', 'NewTextWindowName','width=375,height=250')">New Window Link</a>


For a Button Example:  New Window Button Link   in HTML View change the HTML for the link:

From: <a href="newwindow.htm" ><img src="button.gif" alt="AlternateText Description"</a>
To: <a href="newwindow.htm" onClick="window.open('samplewindow.htm', 'NewButtonWindowName','width=375,height=250')"><img src="button.gif" alt="AlternateText Description" </a>


You can also create a JavaScript Function to open a new window.  This is probably easier if you need to create several new window links.

  1. Use Insert | Advanced | Script... or the Script icon to open the Script form.
  2. Select the JavaScript radio button.
  3. Enter the JavaScript like the following:

function openNewWindow(url) {
    window.open(url,"",'width=375,height=250');
}

NOTE: You can change the window options as described above.

  1. Click OK to close the form.
  2. Create your Link as normally would.
  3. In the Hyperlink Properties add javascript:openNewWindow('yourpage.htm').

This is a Text or Button Example: New Window Link or New Window Button Link

Window Options

The following are the options available to control the window.  Separate each option with a comma when using multiple options. For example: "toolbar=yes,resizable=no,width=200,height=300" specifies to add the toolbar, don not allow resizing, and create the window 200 pixels wide with the height of 300 pixels.  The values in brackets [value] are optional.  If the option is specified with no value, then is true (yes or 1). If is not specified, then it is false (no or 0).

Toolbar creates the standard browser toolbar
toolbar[=yes|no]|[=1|0]
Location creates a Location (URL) entry field
location[=yes|no]|[=1|0]
Directories creates the standard browser directory buttons.
directories[=yes|no]|[=1|0]
Status creates the status bar at the bottom of the window.
status[=yes|no]|[=1|0]
Menubar creates the standard browser menu at the top of the window.
menubar[=yes|no]|[=1|0]
Scrollbars creates horizontal and vertical scrollbars when the window contents are exceed the window size..
scrollbars[=yes|no]|[=1|0]
Resizable allows a user to resize the window.
resizable[=yes|no]|[=1|0]
Width specifies the width of the window in pixels.
width=pixels
Height specifies the height of the window in pixels.
height=pixels
Copyhistory copies the browser history used for the Back and Forward buttons.
copyhistory[=yes|no]|[=1|0]

Return to the Program Tips index

Copyright 1997-1998 ActiveWindows.
All rights reserved. More copyright information and legal stuff here.
ActiveWindows is a division of Dark-Design.