HOW TO: Open a Custom Child Window from a Hyperlink in FrontPage 2000

View products that this article applies to.

Summary

This article describes how to use Dynamic Hypertext Markup Language (DHTML) to open a child window of a custom size by using JScript/JavaScript when a hyperlink is clicked. Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. NOTE: You may receive an error message if you copy the examples directly from this article and paste them into FrontPage. The angle brackets (< and >) may appear as escaped HTML code (< and >). To work around this behavior, paste the script into a blank Notepad document, and then copy it from Notepad before you paste it into FrontPage.

Child Window Sample Code

Sample 1

The following code sample demonstrates how to open a custom-sized child window from a hyperlink by using script code that is tied to the "onClick()" event of the hyperlink.

<html>
<head>
<title>DHTML URLs 1</title>
</head>
<body>
<ul>
   <li><a href="#" onClick='window.open("http://www.microsoft.com","Microsoft","height=400,width=400")'>Microsoft</a></li>
   <li><a href="#" onClick='window.open("http://msdn.microsoft.com","MSDN","height=400,width=400")'>MSDN</a></li>
</ul>
</body>
</html>

Although the preceding code example is concise, it has the following limitations:

It requires script code to be entered for each hyperlink on your page, and each hyperlink must be to the current page, listed as "#", to prevent double-browsing to the new page.
It offers no backward compatibility with older browsers; therefore, older browsers will only reload the current page.

Sample 2

The following code sample takes the problems in Sample 1 into account through the following:

It allows you to create normal hyperlink tags to other pages with the "_blank" frame tag. This opens a new window on most older browsers.
It provides three DHTML functions that detect when a user is resting a mouse on a hyperlink, and, if so, the code sample changes the URL of the hyperlink to the current page and sets a variable to the destination of the hyperlink. Therefore, when the hyperlink is clicked, another DHTML function opens the child window. In addition, when a user is no longer resting the mouse on the hyperlink, a third DHTML function changes the hyperlink's URL back to its original value.

<html>
<head>
<title>DHTML URLs 2</title>
<script language="javascript">
<!--
   /* store the current window location */ 
   var strURL = window.location;
   var strFrame;
   
   /* function used when HREF is clicked */ 
   function clickHref()
   {
      /* check if an HREF was clicked */ 
      if (window.event.srcElement.tagName == "A")
      {
        /* open a new window with the URL */ 
         window.open(strURL,"","width=400,height=400");
      }
   }

   /* function used when HREF is hovered */ 
   function overHref()
   {
      /* check if an HREF was clicked */ 
      if (window.event.srcElement.tagName == "A")
      {
        /* store the HREF's URL */ 
         strURL = window.event.srcElement.href;
        /* store the HREF's target frame */ 
         strFrame = window.event.srcElement.target;
        /* set the HREF's URL to the current page */ 
         window.event.srcElement.href = window.location;
        /* set the HREF's URL to the same frame */ 
         window.event.srcElement.target = "_self";
      }
   }

   /* function used when HREF is no longer hovered */ 
   function outHref()
   {
      /* check if an HREF was clicked */ 
      if (window.event.srcElement.tagName == "A")
      {
        /* restore the HREF's original URL */ 
         window.event.srcElement.href = strURL;
        /* restore the HREF's original target frame */ 
         window.event.srcElement.target = strFrame;
      }
   }
//-->
</script>
</head>
<body onClick="clickHref();" onMouseOver="overHref();" onMouseOut="outHref();">
<ul>
   <li><a target="_blank" href="http://www.microsoft.com">Microsoft</a></li>
   <li><a target="_blank" href="http://msdn.microsoft.com">MSDN</a></li>
</ul>
</body>
</html>

↑ Back to the top