developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
intranetjournal.com
javascripts.com
|
All Categories :
ActiveX
Chapter 17
Using Client-Side Image Maps-the
Easy Way
CONTENTS
Image maps are popular, despite the bandwidth they waste and the
time they take to load. Users like using them and Web page designers
like designing them-perhaps because image maps are one of the
few elements of a Web page that truly distinguish the Web from
other media.
Why use client-side image maps? Using client-side image maps means
you don't have to create a server-side script and program in CGI.
All the processing work is done at the browser; to the server,
a page with client-side image maps is just another HTML page.
Server-side image maps can operate only by sending a special message
to the server that is then interpreted by the image map script
file. Only then is the correct page dispatched from the server.
As a result, tasks such as displaying varying text when a mouse
passes over each area of a map are not possible without client-side
scripting.
The client-side image map example I use in this chapter would
not usually see the light of day on my computer, because the graphic
I use is 27KB-huge in comparison to my usual mean, sub-10KB images.
Regardless, client-side image maps are fun to work with, and the
one I use in this chapter is also an example of two-dimensional
HTML using the HTML layout control. The text box that displays
a message as the mouse passes over the image actually sits on
top of the image itself. More astute designers can take this concept
further and make the message appear to be part of the image.
The following example uses an HTML layout to hold the image and
handle the mouse events that give the image map its functionality:
- First, open the ActiveX Control Pad and select New HTML Layout
from the File menu.
- When the new layout appears, resize it to almost fill the
client area of the layout control.
- You use an ISImage control to hold the image, so
click the ISImage icon on the tool box and then click
anywhere on the canvas of the layout to add the image control.
- To add the actual graphic image to the control, you simply
set the PicturePath property, as shown in Figure 17.1.
You can find the graphic for this example, truck.gif,
on the CD-ROM.
Figure 17.1 : The .GIF placed in the Image control
via the PicturePath property.
Note |
When you develop layouts that include graphics such as truck.gif, you need to specify an absolute path for the graphic. However when you are ready to put the page, the .ALX HTML layout file, and the graphic online, you can edit the PicturePath property from the source of the .ALX file to make it a relative path on the server.
|
- Now you can add the text box control that displays a short
description of the linked file to the user. Using the Properties
window, which you access from the Control Menu (by right-clicking
the control), set the following properties (see Figure 17.2):
Figure 17.2 : Setting the properties for the layout.
MultiLine True
Font 12
pt. Bold
ForeColor A shade
of orange
- Save the layout as truck.alx.
The next stage is to work out which parts of the image are clickable
and act as hyperlinks to other pages in the Web site.
When dealing with image maps in VBScript, you use rectangles to
determine the clickable areas. You specify the virtual rectangles
with two coordinates, representing the top, left corner and bottom,
right corner.
The two coordinates are known as X1,Y1 and X2,Y2.
X is the horizontal axis, and Y is the vertical axis; both axes
have their origins in the top, left corner of the screen.
Therefore, you need to specify four values for each clickable
area: X1, Y1, X2, and Y2.
X1 is the number of pixels from the left side of the
layout to the left edge of the clickable area. X2 is
the number of pixels from the left side of the layout to the right
edge of the clickable area. Y1 is the number of pixels
from the top edge of the layout to the top edge of the clickable
area. And finally, Y2 is the number of pixels from the
top edge of the layout to the bottom edge of the clickable area.
To be sure that I specified values that are understood by the
layout control, I found it easiest to use the layout control itself
to view the values of X and Y. You can do this
by adding a very simple line of code to the MouseMove
event of the image as follows:
- With truck.alx open in the layout control, launch
the Script Wizard.
- Select Image1's MouseMove event.
- Enter the following line of code in the event handler (see
Figure 17.3):
Figure 17.3 : The temporary event handler to display
the X and Y mouse values.
rem TextBox1.Text = "X=" & X & " Y="
& Y
This displays the values of both X and Y
as you move the mouse pointer around the screen.
- Save the layout.
- Open a new HTML document in the ActiveX Control Pad.
- Amend the <BODY> tag so that the background
color is white.
- Add <CENTER> tags to the page.
- With the cursor between the open and close <CENTER>
tags, select Add HTML Layout from the Edit menu.
- Choose truck.alx from the file dialog and click OK.
The object definition for the layout control is automatically
placed in your HTML document, as shown in Figure 17.4.
Figure 17.4 : The new HTML document complete with layout
object definition.
- Save the file as truck.htm, and run it with the browser.
It should look like what you see in Figure 17.5.
Figure 17.5 : Determining the clickable areas on the
image.
- With the cursor at the top of a clickable area, make a note
of the Y value; this is Y1.
- With the cursor at the bottom of a clickable area, make a
note of the Y value; this is Y2.
- With the cursor at the left of a clickable area, make a note
of the X value; this is X1.
- With the cursor at the right of a clickable area, make a note
of the X value; this is X2.
You then create a table of values like the one shown in Table
17.1, which is your map.
Table 17.1. The X
and Y coordinate
values.
| X1
| Y1 | X2
| Y2 |
Area 1 | 50
| 29 | 154
| 92 |
Area 2 | 124
| 92 | 190
| 168 |
Area 3 | 375
| 10 | 434
| 96 |
Area 4 | 344
| 97 | 403
| 184 |
You are now ready to add the code that turns your image into an
image map.
The main functionality of any image map is the capability to click
an area of the graphic and have that mouse click translated into
an instruction to navigate to a different URL. However, the ActiveX
Image control does not include a Click event. It does
have a MouseDown event, and in reality, a Click
event is the joining together of two other events-MouseDown
and MouseUp. The MouseDown event is fired when
the mouse button is pressed, which works just as well as a click
for your purposes.
One thing that server-side image maps cannot do is track the mouse
as it passes over the image. For this, you need a MouseMove
event, which you will program to display relevant messages about
the area of the image that the mouse is currently over.
- If it's not already there, load truck.alx into the
layout control.
- Launch the Script Wizard.
- Go to the Image1 MouseMove event that you
created earlier.
- Add the word rem to the start of the line you entered
earlier. This means "remark" and instructs the VBScript
compiler to ignore the line as executable code. You can obviously
delete it if you want, but you might want to make further amendments
later on.
- Add the following code to the event handler:
If (InArea(x, y, 50, 29, 154, 92)=true) Then
TextBox1.Text = "Our routes, pick-ups, and drop-offs"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then
TextBox1.Text = "Meet the management team"
ElseIf (InArea(x, y, 375, 10, 434, 96)=true) Then
TextBox1.Text = "Our Rates.. the best in the business"
ElseIf (InArea(x, y, 344, 97, 403, 184)=true) Then
TextBox1.Text = "Job vacancies with Web Trucking"
Else
TextBox1.Text = "Welcome to the Web Trucking Web Site"
End If
What's this little lot doing? Notice that each pair of lines
is basically the same; only the numbers and the explicit text
are changing.
You are going to call a custom function, InArea, which
you create shortly. InArea takes the actual values of
X and Y that were passed from the MouseMove
event. X and Y pinpoint the whereabouts of the
mouse cursor. InArea is also passed the four coordinates
that describe the clickable area. If InArea finds that
X and Y are within the clickable area, the Text
property of TextBox1 is changed to a particular description.
Figure 17.6 shows what your finished MouseMove event
handler should look like.
Figure 17.6 : The MouseMove event handler.
- Now select the MouseDown event for Image1.
Note that an image does not have an explicit OnClick
or click event, which is no problem in this case because MouseDown
passes the X and Y coordinates that you need
to determine whether the mouse is within a clickable area. As
the name suggests, MouseDown fires when the mouse button
is pressed.
Add the following code to the MouseDown event handler:
If (InArea(x, y, 50, 29, 154, 92)=true) Then
Window.location.href = "truck2.html"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then
Window.location.href = "truck3.html"
ElseIf (InArea(x, y, 375, 10, 434, 96)=true) Then
Window.location.href = "truck1.html"
ElseIf (InArea(x, y, 344, 97, 403, 184)=true) Then
Window.location.href = "truck4.html"
End If
Notice that the conditional statements are identical to those
of the MouseMove event handler. This time, if the mouse
is found to be within a clickable area, you change the href
property of the Location object, thereby launching a
new page, replicating the functionality of a hyperlink. Your MouseDown
event handler should now resemble the one in Figure 17.7.
Figure 17.7 : The completed MouseDown event
handler.
- Now you need to create the custom function that determines
whether the mouse cursor is within a clickable area. With your
mouse in the right Actions pane, right-click and select New Procedure
from the pop-up menu.
- Change the word Sub to Function and replace
the default name of Procedure1 with InArea.
- After the word InArea, add the following argument
list, which is the list of variables that you want passed into
the function:
(x, y, ax1, ay1, ax2, ay2)
- In the script window, enter the code for the custom function
(shown in Figure 17.8), which is a straightforward one liner:
Figure 17.8 : The InArea custom function.
InArea = x>=ax1 AND x<=ax2 AND y>=ay1 AND y<=ay2
- Click OK, and the Script Wizard generates the required code
in the truck.alx source file.
- Save the layout and try it with the browser.
- Run truck.htm with the browser. Remember that no
amendments are necessary to the HTML file because all the functionality
of the page is held within the .ALX file.
Let's look at the image map in action within the browser. Figure
17.9 shows that, as the mouse is moved around the image, the MouseMove
event is fired, causing text to be displayed in the text box.
Figure 17.9 : As you pass the cursor over an area, the
text changes.
As you move the cursor to another area of the image map, the text
in the text box changes, as shown in Figure 17.10.
Figure 17.10: Move to another area of the image map,
and the text changes.
Clicking on an area of the image map causes another page of the
Web site to be loaded, as shown in Figure 17.11.
Figure 17.11: What happens when you click an area? You
access other pages in the Web site.
Listing 17.1 contains the complete source code for the image map
example, truck.alx.
Listing 17.1. The truck.alx
code.
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Image1_MouseMove(Button, Shift, X, Y)
rem TextBox1.Text = "X=" & X & " Y=" & Y
If (InArea(x, y, 50, 29, 154, 92)=true) Then
TextBox1.Text = "Our routes, pick-ups, and drop-offs"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then
TextBox1.Text = "Meet the management team"
ElseIf (InArea(x, y, 375, 10, 434, 96)=true) Then
TextBox1.Text = "Our Rates.. the best in the business"
ElseIf (InArea(x, y, 344, 97, 403, 184)=true) Then
TextBox1.Text = "Job vacancies with Web Trucking"
Else
TextBox1.Text = "Welcome to the Web Trucking Web Site"
End If
end sub
Sub Image1_MouseDown(Button, Shift, X, Y)
If (InArea(x, y, 50, 29, 154, 92)=true) Then
Window.location.href = "truck2.html"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then
Window.location.href = "truck3.html"
ElseIf (InArea(x, y, 375, 10, 434, 96)=true) Then
Window.location.href = "truck1.html"
ElseIf (InArea(x, y, 344, 97, 403, 184)=true) Then
Window.location.href = "truck4.html"
End If
end sub
Function InArea(x, y, ax1, ay1, ax2, ay2)
InArea = x>=ax1 AND x<=ax2 AND y>=ay1 AND y<=ay2
end function
-->
</SCRIPT>
<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:450pt;HEIGHT:254pt;">
<OBJECT ID="Image1"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:0pt;LEFT:0pt;WIDTH:450pt;HEIGHT:253pt;ZINDEX:0;">
<PARAM NAME="PicturePath" VALUE="f:\llww\chapter17\truck.gif">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="15875;8925">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="TextBox1"
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"
STYLE="TOP:64pt;LEFT:195pt;WIDTH:146pt;HEIGHT:74pt;TABINDEX:0;ZINDEX:1;">
<PARAM NAME="VariousPropertyBits" VALUE="2894088219">
<PARAM NAME="ForeColor" VALUE="4227327">
<PARAM NAME="Size" VALUE="5151;2611">
<PARAM NAME="Value" VALUE="Welcome to the Web Trucking Inc. Web Site">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
</DIV>
Creating image maps with VBScript and the HTML layout control
is very straightforward and enables you to use techniques that
are not available elsewhere. The key is to accurately specify
the boundaries of each clickable area, ensuring that they do not
overlap.
Now look at these other chapters about the HTML layout control
and interacting with the browser itself:
- To learn more about the HTML layout control, see Chapter 14,
"Using the HTML Layout Control."
- To see another graphic example of VBScript and the layout
control, consult Chapter 16, "Real-Life Examples II."
- Chapter 18, "Interacting with the Browser," shows
how you can use VBScript in other ways to interact with the browser.
Q: | Can any graphic be used as an image map?
|
A: | Yes. The format and type of graphic are unimportant. If you can display it through the image control, you can use it as an image map.
|
Q: | I tried using my exisiting coordinate table with my image map in VBScript with the layout control as described in this chapter, and it didn't work properly. Why is that?
|
A: | The measurement system of the layout control is different from the normal HTML page that your current coordinates relate to. Therefore, you must re-measure your X and Y coordinates.
|
|
|