This lab is about another mechanism for naviagating the web. In this mechanism
the viewer, instead of clicking the mouse over a text link to go to a new
page, points the mouse at an area of interest on a graphic or image, called
a hot spot and clicks. The hot spot acts like the normal link and takes
the user to the new web page. Later we will learn that the hot spot can be
associated with more complex user interactions through something called eventhandlers.
These interactive images are called image maps.
We will cover the use of Client Side (CS) image maps. Image maps allow
the viewer to click on various areas of an image and be linked to hyper
documents or multi media elsewhere on the page or on the web. CS image maps
contain the data to determine the areas of the hot spots and the links or
actions associated with hot spots in the client side document, i.e. the browser
can find the data in the web page. In the Server Side (SS) image map the
data for the map areas is stored on the server and needs the web site server
to receive the location of the mouse click to determine the appropriate action
(i.e. where to link).
This new form of interaction with the web page opens up a wide range of
options for the web designer. Distance learning can now allow the student
to point at the location of interest in a chart, diagram or picture. Electroninc
government (e-government) and/or e-commerce can deliver information or services
to the public by having the individual point at the location on a map, satellite
image, etc. and get any information associated with that spot. Service range
from the nearest hospital, available housing for sale, demograghics, weather,
etc.
We will use a tool or program to carry out the programming required to
transform the shape and location of the hot spot on the graphic into a CS
image map. The exercise will require us to get a program off the Web. This
will allow us to get better acquainted with the concept of shareware. Up until
now the software we needed for the labs were normally standard features of
the store bought or PC lab system -- browser, email, ftp, and zip/unzip. Now
we will venture into the world of e-commerce with the try and buy of shareware.
Goals for the Lab:
Learn the theory and HTML tags associated CS and SS image maps.
Learn the use of at least one image map editor -- MapEdit
Learn the page design issues associated image maps.
Learn how to:
find freeware, shareware, and other commercial software found on the
net
download the programs and other data files
install and register the software.
use electronic commerce (ecommerce) and related issues.
Create a CS image map tour of your hometown.
Learn how electronic government is providing services and information
frequently through the use of digital maps and diagrams that use client side
image maps interaction for navigation. This government data is then packaged
by Value Added Resellers (VARS). The VARs then provided e-services to the
public ranging from flight tracking of airlines to location of the nearest
resturant over web based telephony.
Learn what electronic maps servers are available on the web and what
types of useful information can be supplied by these servers.
Introduction to Image Maps:
Theory: Client Side (CS) Image Maps
This is an example of a client-side image map.
This is a simple 3 Button Menu Bar. A button bar is a single image that
is clearly broken into regions or hot spots that will act like a button when
clicked on transfer us to a new page. Note what happens when the mouse passes
over the left (1), middle (2), or right (3) button area. You should see your
mouse cursor change shape. You should also see the message bar (at Bottom
of the Screen) indicate that you will go to the left page i.e. Left.HTML when
the mouse is over the left (1) button. Now click to convince yourself that
it indeed does so!
What you observing is an example of a graphic image with Hot Spots (Zones)
that are sensitive to the Location of the mouse and will cause a hyper link
to a URL location when the user clicks the mouse while over such a hot spot.
The image maps the click to a URL; hence, the name, image map. There are two
types of image maps i.e., Server side and Client side. The original image
maps were server side and required the cooperation of a server, that is another
computer that carries out services for a web site. The client side was developed
later and allows us to determine the location of the hot spot and the URL
with only those resources located on the user's computer and browser. This
client side image map offers many advantages.
To create a client side image map requires the introduction of two new tags:
the map tag and the area tag. The map tag defines the map's name and other
attributes and contains the area tags. Each area tag defines the shape of
the hot spot and the URL associated with it. The three button example involved
three areas tags each with a rectangular shape the size of each button.
Note the image has its upper left point (x,y) = (0,0)
and its lower right coordinate at (N-1, M-1) where the image width = N pixels
and its HEIGHT = M pixels. In the three button example it is easy to determine
the coordinates that are associated with each hot spot once we know the image's
size. To specify a rectangular hot spot, we set the shape attribute to be
a "rect" and give the rectangle's upper left and lower right coordinates.
In the example the source image is 300x50 pixels and each of the three buttons
is 100 by 50 pixels.
Before going further, let us look at the code for
the above simple example.
HTML IMAGE MAP CODE For the 3 Button Bar Above
<!-- the Map is named menu and contains
three rectangular hot spots -->
<MAP NAME="menu"> <!-- The area tag has two attributes
Shape, in this example set to "RECT", and COORDS = (X-upper_left),(Y-upper_left),(X-Lower_right),(Y-lower_right)
where the COORDS is a list of integers seperated by commas set off in
quotes. Since the source gif (menu.gif) is 300 x 50, the left button
(1) is one third the length. Hence, upper left is (0,0) and lower right is
(100 -1, 50-1)= (99,49). HREF="left.html" tells that the click will link
us to left.html located in this directory. --> <AREA SHAPE="RECT" COORDS="0,0,99,49"
HREF="left.html">
<!-- Next we create an inline image
with source menu.gif and a USEMAP attribute = "#menu". The attribute USEMAP
tells the browser to look for a client side map named menu. The # sign is
necessary. -->
An example that illustrates non-rectangular hot
spots:
In this test you will see that the Three shapes: 1) the rectangle A, 2)
the circle B, and 3) the triangle C, as well as the remaining area inside
the bounding square are hot spots that will cause us to go to the appropriate
URL if we click while the mouse is over it.
Most browsers will support a rectangular area as an client side image
hot spot. The circle and closed polygon are also frequently supported. While
point and ellipse are seldom supported and then only by SS image maps.
Client
Side Maps but Based On Java. Java is a
Programming Language From Sun Computers.
This is an example of a Scrolling Image Map Java Applet.
Remember this site if you build Image Map Pages)
Using Java to create a magnifing glass example:
In these examples we have two images. The first is
the total image or map. Associated with this image is the locator, which
is a box or circle that defines the area of interest. This locator
can be moved by the viewer over an area that is then shown in the second
image. The second image is normally an enlarged view of the portion of the
image under the locator.
Find the Shipyards
of the world. A Slick example
to motivate the reader. In the map of the world plave you mouse in the middle
of the locator box and hold the left mouse button down and drag the locator
over the part of world of interest. What happens in the second larger image?
Click in the enlarged image? What happens? How many ship yards in the
US are there for marine services and repairs?
reading in an HTML document and selecting the
inline image on the page to use to create the image map,
creating the hot spots on the image,
establishing through a dialog box the interactions
that should take place when the mouse is clicked over the hot spot, and
writing the tags that carry out the design,
finally testing and editing any changes that
might be needed.
some image map editors are capable of generating
either CS or SS style html tags and/or converting from one to another
Getting Our Software Programs
From the Net:
Ecommerce, potentially your
first experience:
While it is becoming more common to buy and sell things over the Internet,
it is still less than a majority of the population. The idea is of course
to establish a mechanism for placing an order, establishing a means of payment,
getting the goods delivered.
Freeware:
In the early day of the internet the users were scientists and engineers
most associated with government research projects. These users were like
the pioneers on the early western frontier. What they had that was useful
to others they shared. Hence, if the software they developed was useful to
others they gave it away (remember the addiction concept -- to get full benefit
out of your efforts you must share). To see the scientists' nice charts and
graphs you had to use their software. Lawyers in this early epoch were known
to run down headquarters hallways screaming and muttering when they finally
understood that scientists were giving away ideas like the concepts for the
WWW, browsers, and multi media. Freeware is as the name implies free;BUT not necessarily without RESTRICTIONS. The creators may:
limit your use to noncommercial applications,
require you to keep a copyright notice, and
maybe an ad on your web page as to their greatness.
Shareware:
Software that can be:
used for a trial period and then
paid for or else,
removed from your machine.
The concept of marketing and selling things on the internet is now beginning
to mature. We take this opportunity to introduce the student to the concept
of shareware as a first step in illustrating the business potential of the
Web. Concepts of security, cyber age money and banking, and their risks and
rewards will be addressed in later labs.
Finding and Using Shareware:
The Student can either use a search engine -- try
( "image map" + shareware ) as key words, or can try any of the following
choices:
In the case of MapEdit, when you click on Download Here, we cause a ftp
transfer of the program executable, map32dst.exe. You should save it on an
empty disk on the A;/ drive. The installation of the MapEdit program is of
the self installing type. All the student has to do is open the A:/ drive
and double click on the map32dst.exe icon and follow the directions when
the process starts. Answer all questions with yes or ok where appropriate.
The Student may need to uncompress the archived files (extension .zip).
Save the File to a clean (no files on it ) 3 1/2 in. disk on your
A:/ drive.
Find the file as it is loaded on the A:/ drive and click on it
should be map32dst.
The file will ask to install on your machine. Chose C:/ Programs
directory.
Open it, i.e. run the program.
Step 2. Upon opening the MapEdit Program
Upon opening the MapEdit software, go to File/Open HTML Document .
The above dialog box will appear. The HTML file name is imagemap.html.
Use the Browse Button -- look in A:/ for the file; set the file format to
-- all extensions.
The next dialog box will contain all the images in imagemap.html. Click on the name of the map file even if there only one you must
click on it.
Step 3. Create the Client Side
Image Map Hot Spots
Before you begin -- you must do the smaller regions inside the Larger regions
first. Why?? Because the computer checks the hot spots in the order they are
created. IF THE LARGER REGION WERE FIRST THE COMPUTER WOULD NEVER CHECK THE
SMALLER ONE INSIDE IT. Note the light green line outlines hot spots currently
created.
Sample Step -- Creating a Polygonal Hot Spot
By clicking the
Polygon Button we create the Yellowstone Park hot spot. Note the Highlighted
region.
Steps to be Followed:
To create the polygon click at every turn.
When you are finished; Use Right Button Click to End
The Following Dialog Box will appear after the the Hot Spot has been
Defined.
Here we will give the URL to be linked to; here we use "Yellowstone.html"
Fill in the dialog box with the names of your Html links, i.e. poly.html
for Polygon etc. Note leave Target BLANK!
Fill in Alternate with the name of the polygon
hot spot Use this Name to fill out the OnMouseOver where
Yellowstone is in the Quotes.!! See the remark..
NOTE -- Use single quotes and do not forget the ";" between
message and return
window.status='YOUR_MESSAGE_HERE' ; return
true
The message will appear in the status window,
at the bottom of the window, everytime your mouse is over the hot spot.
In the lab exercise, create at least one hot
spot for each shape region (rectangular, circle, polygonal)
Step 4. Save and return to Composer.
Hit the icon for saving the file (it looks like a disk).
Step 5. Return to Composer and Examine work
Upon reopening the Composer you should see:
The image with 3-4 price tag-like icons that will look those below:
These tags are only visible in Composer. While in Composer on passing
your mouse over them, they expose their content as HTML tags -- i.e.the <map>
and <area> tags plus some <!-- Commercial message Comment
tags -->.
Electronic Maps:
In this laboratory's exercises requires street map images of your
home town. The site that is used to obtain the street map can provide a
number of other services such as:
Directions from one street address in town to a location in another
town giving the shortest route, giving mileage, estimated times, etc..
Send greeting cards, gifts, and other ecommerce services to the address.
Lists of nearby services such as plumbers, florists, etc. giving
the distance and location from a fixed location such as your home address.
This may include the map location of these service providers.
Most search engines offer these services to internet users and charge advertisers
a fee for providing the opportunity to have your eyes looking at the above
information. The site attempts to get a return for it creation of the useful
service, the advertiser hopes to gain your business, and you get the advantage
of a easy to use and highly useful map data base. This form of data has
its origins in the U.S. Commerce Department's Census Bureau DIME files in
order to carry out and analyze census data.
E-Government and Digital Maps, Satellite Imagery,
and Geographic Information Services:
Government at all levels but most often at the federal level has needs
for creating data in the form of maps and charts. Starting with maps for
navigation and exploration, land surveys to establish property ownership
and political boundaries are essential in any society going back to biblical
times. Digital maps, i.e. the storing and display of map, geo-political and
data in electronic format began in the late 1960s and early seventies. One
of the early pioneers was the city of Nashville, TN working with Intergraph
Computing. Nashville transformed its property deeds, land surveys, water
and sewer plans, etc.into a digital information base. Every piece of property
including streets and roads were given a tax parcel number. Every office
of government from the police and fire, the water and sewer, roads, etc.
were required to convert to this Geographic Information Systems (GIS). The
basic document then became a Computer Aided Drawing (CAD) file of your property.
Police and fire responding to emergencies knew the lay out of the house,
the number of people living there, and the outstanding warrants and restraining
orders. This greatly increased the speed of the response and increased the
safety to the first responders to domestic situations. Because the documents
are part of the daily business, engineering, and maitance processes they
are more likely to be up to be kept up to date.
More recently the U.S. Defense Department's creation of a satellite system,
Global Positioning System (GPS), has resulted in real time navigation, precise
location and tracking, and hundreds of other applications. GPS originally
was for navigation of military vehicles. When GPS was combined with electronic
mapping, it spawned so many commercial applications that these users threaten
DOD's ability to shut it off. Thus both the Internet and the GPS have gone
far beyond their original military use. The combination will in the near future
greatly improve the efficiency of our logistics and transportation systems.
911 operators can use GIS and GPS to locate the source of the phone call,
locate the nearest available source of aid and dispatch help in a few key
strokes or mouse clicks.
Vehicle fleets operations can use the same technology to monitor and manage
their logistics and transportation systems, pick up and delivery systems,
and nation wide routing and scheduling of truck fleets. One of the authors,
created one of the first high tech software e-services, Decision Graphics
that used online maps and fleet data to create the first online graphics decision
support tool -- Interactive Vehicle Scheduling System (IVESS®).
IVESS was used by Fortune 500 corporations and governments for routing everything
from school buses, phone coin collection, national truck fleets, etc. IVESS
was ahead of its time and pioneered the way for the GIS/GPS command
and control systems that are now appearing. These systems originally start
out as stand alone applications over private networks but increasingly they
are now integrated into very complex supply chain supply chain solution over
the web.
Onstar based on using GIS/GPS and wireless telephony is probably the most
widely known digital map application due its increasing use in luxury cars
and in rental fleets. Within the next few years many auto makers plan to sell
(GIS/GPS/onboard computer/telephony) as a standard feature. When that happens
the automobile will become the electronic infrastructure for web based wireless
applications.The automoblie with its more than twenty computers and devices
will become a local area network (LAN) and wireless telephony will provide
the connection of this LAN to the Web. Not only will the driver and passengers
be offered a variety of e-services like on board movies on demand and a host
of information products, but the auto's computers can access the web. The
car can provide data about its location, need for services or repairs, update
its programs, and communicate its intentions to the vehicles in the roadway.
One application that is frequently seen in TV ads is the car's firing
of the air bag(s) causing Onstar operator to inquire if the driver needs
assistance. The air bag computer sends the message and the GPS sends the
location. The driver either responds or help is sent to the location given
by the GPS.
The Intelligent Highway under development by the U.S. DOT and private
industry uses inter-vehicle communication to provide for driver-less or computer
assisted driving. For example, you are driving and forced to brake for an
animal. Your automoblies computerized braking responds and send sends a message
to the car(s) behind to brake immediately to avoid an accident. In fact the
technology is not in the remote future but is being tested on real roads.
Satellite data has greatly improved the government's ability to track
weather, measure environment and climatic variables, and to track population
and industrial growth. With the ebbing of the Cold War, the U.S. government,
other nations, and a growing number of private firms are making available
satellite and other aerial surveillance products that allow for accurate
weather forecasting, crop forecasting, and the coordination of emergency
response to national disasters.
The national and international airspace is now monitored and managed with
increasingly sophisticate Traffic Management Systems (TMS). These systems
concepts are also being applied to navigation of the high seas and waterways.
The need for safer international marine travel and anti-terrorism
have resulted in new GPS requirements that will also provide improved
shipping and port efficiency. The advent of wireless networks and intelligent
highways will allow for improved logistics. This ability of tracking the
movement of goods and services will greatly improve the efficiency and productivity
of modern manufacturing's supply chain and distribution channels. Companies
like FEDEX, UPS, and the United States Postal Service (USPS) are using all
of the above technologies to provide a multi modal integration of their delivery
systems.
Sample of the Type of Routing and Directions One can get
from a Service
Interesting Electronic Map Sites on the Internet:
Maps on Us, Maps,
Routes, Find People, Find Telephone and Email
Infoseek,
World Maps, Zip code, Maps, People Finders
Mapquest, Maps, aerial
photos, and driving directions, services and shops,
terraserver,
aerial and Spin-2 satellite image data, topographic maps, real estate listings,
Maps -- St. John's Prep School's Teachers' Resource Maps:
http://www.stjohnsprep.org/acad/map_sources.asp
Pages of references that include satellite and aerial data, University map
libraries, etc. This map reference page has a lot of good and some unique
materials. Also you might find the VRML (3-d) maps of interest.
Charlie's References, University of the Virgin Islands CS
Department, a general reference of Web Sources. See Travel and Caribbean
Information -- See the Weather Map Section and the Oceanic Data and Naval
references.
The FAA's Enhanced Traffic Management System (ETMS) is the fusion of the
FAA, NAV CANADA, and Great Britain radar and other flight data sources and
weather for the Northern hemisphere to provide strategic flow management
of air traffic. It provides critical information to the Air Traffic Control
(ATC) about the current national view of the airpspace and projected situation
for up to 12 hours into the future. The traffic managers bring up displays
of data to plan the flow of aircraft from one region of the country to another.
The manager can select (filter) data to display only airplanes, regions, or
weather of interest. ETMS is used by traffic flow managers and others who
need to coordinate the safe and efficient movement of thousands of aircraft
an hour through out the northern hemisphere.
ETMS data is feed to air line operations. ETMS is the basis of tele-conferences
every two hours between officals from the FAA and the major airline operations
managers. This conference creates a national strategy, called the playbook,
for handling weather and other delays. The airlines in turn supply confidential
data about their operations is used by the FAA to minimize the total delays
in the system. This process is called Collaborative Decision Making (CDM).
ETMS creates a Traffic System Display (TSD) that can show every plane
that the FAA is tracking (over 6000 flights at anyone time) or filter the
data for purposes of analyzsing a problem. In the filtered display below
the yellow airplan icons are inbound to Chicago O Hare airport (lower
left corner) and the purple ones are inbound for Boston Logan Airport.(lower
right). The weather is also shown over North America. Note the traffic over
Canada that is being tracked from Europe. Also observe the strings of airplanes
coming into O'hare coming in over the four corners of the air space over
Chicago.
The ETMS filtered data feed is provided for added value dot coms, i.e.
these companies add their data and other progarmming enhancements. The major
product of this effort is flight tracking -- which allows travelers and others
to locate air planes while enroute and receive accurate arrival times. Taxi
fleets and limo services use it to plan their arrivals to pick up deplaning
passengers using Wireless Application Programs (WAP) and hand held PDAs and
digital phones. Passengers use it to keep track of flights and to book alternate
routings guided by flight tracker data.
After Reading the directions on the above page. Click the [Logan
Airport Monitor] or click http://www4.passur.com/bos.html
A page will appear that contains a program called a Java Appelet. When the
airport map appears.the applet is ready to run. There is clock in the top
right. Set its time for a time one hour earlier than the current time. Click
[Start Replay] to watch the actual air traffic over Boston at the time
on the clock. Note some traffic is taking off, landing, or just passing
overhead. You can information on a specific plane by clicking on it with
your [Right Mouse]. The tracking is based on the actual recorded radar
data.
Lab 5 Instructions: Creating
a Client Side Image Map with Shareware
In this laboratory assignment we will locate a map of the our home town
and use an image map editor to create a minimum of three areas (hot spots)
where the viewer will be cued to click in order to find out more facts about
the area or place. The three or more areas will be chosen so as to be an
example of each of the shapes, i.e. rectangular, circular, and polygonal
. The exercises will create at least four separate web pages:
imagemap.html which is contain the image map
rect.html which contains some fact about the map area whose shape
is a rectangle. For instance, this is the location of my home, high school,
or job.
circle.html which has information about a region, place or location
enclosed by a circular area. Perhaps the location of favorite mall, site of
a personal success, or town center.
poly.html which is a description of a geographic area or feature.
The use of the polygonal shape could be appropriate for a river, winding street,
or large park, etc.
The design of this portion of our web site should reflect a concern for
how the viewer will navigate the four page. Note that imagemap.html page
is linked back to the home page of the web site indicated by the orange arrow
below. A link from the home page to the imagemap.html is left out to avoid
clutter. The image map in the diagram below has three hot spots one for each
shape. The viewer will be cued by the cursor changing shape over the area
created during the editing phase of the exercise. Also a message will appear
in the status bar (at the bottom of the window) when the mouse is over a
hot spot. A message can also occur will the mouse is moved out of the hot
spot.
The three pages will also have a link back to the image map.
A well designed site will lead the viewer through the site with a carefully
designed navigation strategy that does make assumptions about how the viewer
arrived at a page. For instance, a viewer could have dropped into the page,
rect.html, having discovered it from a search engine. If there is no link
back to the image map page, there is no easy way to find it. Hence, the
viewer can not discover how the current page is related to the rest of the
site. As the labs lead to projects of greater complexity the web author will
be faced with finding efficient navigational methods that allow site visitors
easily understood options of where to go next.
The names of the files rect.html, circle.html, and poly.html are only
used to add in the explanation. the names of files should allow the author
to find and manage web site in an efficient manner. Good practice is to plan
the development of your web site so that the links maybe filled in as the
pages are created. A good web master will define a uniform file naming convention
to assist in both the development and maintenance of the site.
For the Reader's Information
The above graphic was created using the art tools in Microsoft Word.
The text and graphics were copied to MS Power Point for to create a slide
presentation. The slide presentation was edited by Composer to extract the
JPEG image. Thus the same material is reused in several different documents
to satisfy different audiences. The tools in a modern office suite are designed
to allow even an individual with limited artistic skills to create a colorful
and attractive presentation. The interchange of document objects between various
programs makes for very high productivity.
Exercise 1: Down load MapEdit or a similar
shareware editor.
Save the File to a clean (no files on it ) 3 1/2 in. disk on your A:/ drive.
Doulbe click the [MyCoumpter] icon and on the A:/ drive. Double click on
map32dst.
The file will ask to install on your machine. Chose C:/ Programs directory.
Open it, i.e. run the program Click [Start]/Programs/MapdEd
Exercise 2: Capture a map of their home town
Capture a real map of your home town from one of the many map servers on
the Net.
Go to Mapquest, Maps, driving
directions, services and shops,
You will be asked for a street address, city, state, and zip code. You
may use any street address that will give a map with features such as parks,
schools, etc. that can be identified for purposes of this exercise. Each
feature will have a web page developed for it, i.e. the student will describe
something of interest to the viewer.The later exercises will require you
to select three map features that will use a rectangular, circular, and polygonal
shaped regions of interest (hot spots). Note that their is a tab above the
map that when click will produce an aerial photo of the region in the
map. You may use the aerial photo in the exercise if you wish.
In this exercise after you give the street address, etc. the web site
will asks it server to give you a map of the surrounding area. This map will
then be displayed on the screen. Place your mouse over it and capture as
you normal would for any image (right mouse button and select - Save Image
as..)
Save the image to your A/: drive and give it the Name
of your town. BE CAREFUL TO SAVE THE MAP AS, YOUR_HOMETOWN.GIF, i.e. make sure the extension is ".gif".
This map is normally in GIF format.
As an example the following state map was captured off the web.
To show how current and upto date this information is the result of the
query for
World Trade Center
New York, NY
Date of query -- Mapquest Oct 28, 2001, i..e. After the September 11, 2001
Terrorism
1-3 World Trade Center
Aerial Photo of WTC
A Typical Application for an image -- Massachusetts University Campus
Locations:
A real typical application might be to out line every county in the state
(before they are abolished) and have a tourist web site where the potential
tourist clicks in a county and is given information about events happening
in the county during the next several months. Here we have hot spots for
the five University of Massachusetts Sites.
Exercise 3: Create the imagemap.html
Step 1: Create the basic page template
After reviewing the captured map open a separate Composer window and proceed
as follows:
Copy yellow area below and Paste it into Composer SaveAs -- imagemap.html
Image Map Test
Visit My Home Town
Insert Your Home Town Map or Aerial Photo Place mouse here, i.e. use image
button and chose file to locate and open it. Hit [Apply] [Close]
Locate the points of interest in a map of my home town. In my
image map are three areas a rectangle, a circle, and a polygon.
When you put your mouse over them the cursor will change
shape and a message will appear in the status bar in the bottom of the window.
Click and you will get more information.
Create a Link to Your Web Site
Link For Text
Visit My Home Page
Day Student: URL set to
http://www.cs.uml.edu/~Your_USERId
Cyber Ed: URL set to
http://ceweb.uml.edu/students/Your_USERId
Once the material has been pasted and saved into a Composer page:
The page will have a centered heading -- [Align] and select center
then [style] and select Heading 1. Use text -- Image Map Test
Use the [Image] button select Choose File.. Find the image of the
home town map, i.e. the map captured from the net, and hit [Open]. Select
[Apply] if it looks ok, then hit [Close].
Use the [Link] button and your web home page URL to provide
a return to your Home Page, i.e.
Text -- Return to home page
URL (your home page)-- http://www.cs.uml.edu/~your user_id
Use [SaveAs] and save on your A:/ drive the file as imagemap.html. The title should
be -- Image Map Test based on the Town of (Your_Selected_Town),
MA.
Step 2: Use the Map Editor to edit the imagemap.html.
Following directions in the MapEdit Tutorial:
Open up the imagemap.html file. Select the image of your hometown
map as the graphic to become your client side image map.
Select at least three regions on the map that be used for points
of interest to the viewer.
Chose the first area to be a rectangular shape. Click the rectangle
button. Place the mouse close to the point of interest and hold the left mouse
button down. A rectangular area will be defined as you move the mouse. Be
sure that the area is of sufficient size that the viewer can easily find the
hot spot. When you have define the rectangle to your satisfaction, then release
the mouse.
A dialog window will appear.
The URL is rect.html,
the alternative text should describe what is the point of interest.
Chose the second area to be circle. Proceed as before using the URL,
circle.html.
Chose the third to be a polygon. Remember that in the case of the
polygon you click the left mouse to start, and again each time to draw a line
from the last point (location of last click). To end the definition of the
area click the right mouse button. The URL is poly.html.
Continue defining areas of interest with each area you must define
a link.
Exercise 4: Create the three feature web pages
rect.html, circle.html, and poly.html
Create three simple web pages (rect.html, circle.html, poly.html) that will
tell the viewer that they clicked on a hot spot of the appropriate shape,
e.g. in the case of rect.html copy the contents in the yellow area below into
Composer. Once the template (a model or structure for a document is referred
to as a template) is in the Compose replace the red text with appropriate
facts about the region of the map indicated by the hot spot.
Copy and Paste into a Blank Composer Page
Rectangle
You have clicked on a rectangular Hot Spot:
YOUR TEXT DESCRIPTION OF WHAT MAP FEATURE THE VIEWER
CLICKED ON GOES HERE
RETURN (USE THE LINK BUTTON TO LINK TO
YOUR IMAGE MAP PAGE)
After you have copied and edited the material save the web page to your
disk as rect.html
Copy and Paste into a Blank Composer Page
Circle
You have clicked on a rectangular Hot Spot:
YOUR TEXT DESCRIPTION OF WHAT MAP FEATURE THE VIEWER
CLICKED ON GOES HERE
RETURN (USE THE LINK BUTTON TO LINK TO
YOUR IMAGE MAP PAGE)
After you have copied and edited the material save the web page to your
disk as circle.html
Copy and Paste into a Blank Composer Page
Polygon
You have Clicked on a Polygonal Hot Spot:
YOUR TEXT DESCRIPTION OF WHAT MAP FEATURE THE VIEWER
CLICKED ON GOES HERE
RETURN (USE THE LINK BUTTON TO LINK TO
YOUR IMAGE MAP PAGE)
After you have copied and edited the material save the web page to your
disk as poly.html
The purpose of these three pages is simply to show that the three hot
spots of a given geometric shape work in a proper manner. In a real Web
example these would go to URLs that would provide appropriate information
or multi media to be linked.
Exercise 5: Test and Correct
you Pages -- Put on you Web site
Step 1: Examine and test your image map.
Click the [Preview] Button and use the Browser to test your image map.
You should see:
the mouse change when you are over each hot spot.
A message appear in the status bar at the bottom of the window.
When you click on the rectangular hot stop you should see the next
page linked to be rect.html. and similarly for the circle and polygonal shaped
hot spots.
After a thorough testing, open index.html in Composer.
Place the cursor under last linked lab, and use [Link]
Use as text --See an Image Map of My Hometown,
Use as URL -- imagemap.html
Now test again.
Assuming that you have index.html in a Composer window, use the [Publish]
button to move the files (imagemap, rect, circle, poly, and the new index)
html files and the map, i.e. hometown.gif from your working A:/drive to
your web site and do one final set of tests. You may also use Ws_ftp if that
is a more comfortable program for you to use.
Step 2: Use the Map Editor to edit the imagemap.html.
Following directions in the MapEdit Tutorial:
Open up the imagemap.html file. Select the image of your hometown
map as the graphic to become your client side image map.
Select at least three regions on the map to be used for points of
interest to the viewer.
Choose the first area to be a rectangular shape. Click the rectangle
button. Place the mouse close to the point of interest and hold the left mouse
button down. A rectangular area will be defined as you move the mouse. Be
sure that the area is of sufficient size that the viewer can easily find the
hot spot. When you have defined the rectangle to your satisfaction, release
the mouse button.
window.status= 'Leaving_Your_Location_Name_Here'
; return trueThe single quotes in the onMouseOver and onMouseOut
are necessary.
Choose the second area to be a circle. Proceed as before using the
URL, circle.html.
Choose the third to be a polygon. The URL is poly.html. Remember that in the case of the polygon,
you click the left mouse to start, and again each time to draw a line from
the last point (location of last click). To end the definition of the area
click the right mouse button.
Continue defining areas of interest. With each area you must define
a link.
References:
Glossary of New Terms:
Button Bar
digital maps
Ecommerce
E-government
E-service
Electronic Maps
Freeware
Hot Spot
GPS
Geographic Information Systems (GIS) --
Image map
Shareware
Template
Email
Polygon Button we create the Yellowstone Park hot spot. Note the Highlighted
region.
These tags are only visible in Composer. While in Composer on passing
your mouse over them, they expose their content as HTML tags -- i.e.the <map>
and <area> tags plus some <!-- Commercial message Comment
tags -->.
1-3 World Trade Center
Aerial Photo of WTC
