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 Mouse Tracking Sample
How it works
How does the the Mouse Tracking Sample work? The document contains an anchor
named "Image", which raises events as the mouse moves over it. A VBScript
event handler tracks the mouse movement, and changes the message in the text
box.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>