How it works

When clicked, the image raises an OnClick event, causing a VBScript-written event handler to run. This event handler hyperlinks to the appropriate page by changing the value of the Location object's hRef property.

This "client-side image maps" approach has several advantages over traditional image maps. First, its possible to have a higher degree of interactivity. In this example, as the user moves the mouse, a descriptive text box provides immediate feedback. Second, network bandwidth is conserved since it is not necessary to use the network for simple hit detection.

The code

<SCRIPT LANGUAGE="VBScript">

	' Remember the last location clicked.
	Dim mX, mY

	Sub Image_MouseMove(s, b, x, y)
		mX = x
		mY = y
	
		If InRect(x, y, 5, 30, 120, 85) Then 
			Call DescribeLink("The Microsoft Product Catalog")

		ElseIf InRect(x, y, 5, 95, 120, 135) then 
			Call DescribeLink("Microsoft's product support options")

		ElseIf InRect(x, y, 5, 150, 120, 190) then 
			Call DescribeLink("Download free Microsoft software")

		ElseIf InRect(x, y, 470, 30, 570, 47) then 
			Call DescribeLink("An Internet tutorial")

		ElseIf InRect(x, y, 470, 70, 570, 87) then 
			Call DescribeLink("Use these search services to find anything on the Internet")

		ElseIf InRect(x, y, 470, 105, 570, 122) then 
			Call DescribeLink("We've put helpful and handy web resources at your fingertips")

		ElseIf InRect(x, y, 470, 140, 570, 157) then 
			Call DescribeLink("Take a look at this week's picks")

		ElseIf InRect(x, y, 470, 175, 570, 192) then 
			Call DescribeLink("About the Microsoft Network")

		Else 
			DescribeLink ""
		End If
	End Sub

	Sub Image_OnClick()
		If InRect(mX, mY, 5, 30, 120, 85) Then 
			location.href = "http://www.msn.com/products/msprod.htm"

		ElseIf InRect(mX, mY, 5, 95, 120, 135) then 
			location.href = "http://www.microsoft.com/support/"

		ElseIf InRect(mX, mY, 5, 150, 120, 190) then 
			location.href = "http://www.msn.com/products/intprod.htm"

		ElseIf InRect(mX, mY, 470, 30, 570, 47) then 
			location.href = "http://www.msn.com/tutorial/default.html"

		ElseIf InRect(mX, mY, 470, 70, 570, 87) then 
			location.href = "http://www.msn.com/access/allinone.asp"

		ElseIf InRect(mX, mY, 470, 105, 570, 122) then 
			location.href = "http://www.msn.com/access/ref.asp"

		ElseIf InRect(mX, mY, 470, 140, 570, 157) then 
			location.href = "http://www.msn.com/access/links/other.htm"

		ElseIf InRect(mX, mY, 470, 175, 570, 192) then 
			location.href = "http://www.msn.com/about/msn.htm"
		End If
	End Sub

	Function InRect(x, y, Rect_x1, Rect_y1, Rect_x2, Rect_y2)
		InRect =  x > Rect_x1 And x < Rect_x2 And y > Rect_y1 And y < Rect_y2
	End Function

	Sub DescribeLink(Text)
		TxtLinkDescription.Value = Text
	End Sub
</SCRIPT>