This article describes how to use Dynamic Hypertext Markup Language (DHTML) to open a custom browser window from an Image Map hotspot.
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.
Create a Sample Page
Follow these steps to create a DHTML sample by using the Image Map editing features of FrontPage 2000.
- Open a new, blank page in FrontPage.
- Insert an image on your page.
- Select the image. The Image Editing toolbar appears at the bottom of the screen. Click the Rectangular Hotspot button, and then draw a rectangular hotspot on the image.
- When the Create Hyperlink dialog box appears, delete all the text from the URL box, and then click OK.
- Switch to HTML view.
- Insert the following code in the <HEAD></HEAD> section of the page:
<script language="javascript">
<!--
function OpenWindow(strURL,strWidth,strHeight)
{
/* open a new browser window based on info passed to the function */
window.open(strURL,"","Width=" + strWidth + ",Height=" + strHeight,0);
}
//-->
</script>
- Locate the image map entry. It may resemble the following:
<area nohref coords="0, 0, 100, 100" shape="rect">
- Modify the image map entry so that it resembles the following example:
<area nohref coords="0, 0, 100, 100" shape="rect"
onClick="javascript:OpenWindow('http://www.msn.com',500,350);">
- As an optional item, you can modify the image tag to display a different insertion point when a user rests their mouse on the image. Locate the image tag, which may resemble the following:
<img width="200" height="200" src="images/image.gif" usemap="#FPMap0">
<img style="cursor:hand" width="200" height="200" src="images/image.gif" usemap="#FPMap0">
- Return to normal view and save the page.