An image map is an active clickable image that loads different
web pages depending on what part of the image is clicked. In an image map, the
image is divided into regions or areas
with each region or area linked to a different URL. Thus an image map links the
various areas of an image with a series of URLs.
These regions or areas are also called hotspots.
Thus an image map is an image on a web page that contains hotspots.
For example, here is a simple menu I created in Paint Shop Pro. This is
one image that has been divided into four areas with each area linking to a different page on my website.
As you move the mouse pointer over any of the four areas, notice the URL
on the Status bar at the bottom of the browser window and notice that as
you go into another region, the URL changes to the URL of the new region.
Now take a moment and click in the various areas to see the different web
pages load. When you visit a link, click on the BACK button to
return to this page.
ADVANTAGES OF USING IMAGE MAPS
Image maps provide an alternative to loading a page containing
several linked images.
The image map allows you to use a single image to provide
links to a number of different URLs. This is especially useful if you have
a website with a lot of images and you do not want to slow down the loading
of pages over slow connections.
Image maps can provide an aesthetically pleasing alternative to cluttered
Image maps work independently of your web server. That is, image maps are
interpreted by the visitor's browser and not by your web server. With image
maps, you place all the necessary data to run the map in your HTML document.
Thus when a visitor (a client) clicks on the image, the browser processes the
coordinates of the clicked point without any interaction with your web server. So the visitor's browser does all the work.
Some web designers also include alternative text links for the image
map. That is, the
links in the image map are also repeated somewhere else on the web page as
text links as in:
These text links are usually placed at the bottom of the web page. You may wish to include text links for browsers that do not display images.
These include non-graphical browsers such as Lynx as well as browsers who have
had their images turned off.
The first part of this statement (<P ALIGN="center">)
centers the image using a paragraph tag. Note the </P>
at the end of the statement to indicate that the paragraph ends and the centering is turned off.
The name of the image is map1.gif.
Because of the absence of a path to the image, it is assumed that the image is located
in the same folder as the HTML document.
The width of the image is 400 pixels and the height is 25 pixels.
There is no border around the image (BORDER="0"). This was just a
personal choice. You may wish to include a border around the image.
The attribute USEMAP tells the browser that this is
an image map defined under the name menuline.
Thus USEMAP="#menuline" tells the browser to
USE the MAP file named
menuline located somewhere in this HTML
document. The # indicates an internal
link on the same page - much like that of a page jump (Lesson Six).
The USEMAP attribute tells the browser which image map file
to use for the image. This example uses the image map file named
menuline. We must associate a name with the map file and the name you
choose is up to you. The map file contains all the necessary data to
run the image map. You can have any number of image maps in the
same HTML document as each image map will have its own unique name. Note that the
name is case sensitive. Thus USEMAP="#menuline" is different from
You can think of an image map having basically two parts - (1) the
image itself and (2) an invisible map placed over
the image. This invisible map breaks the image down into areas
(also called regions or hotspots) and assigns a
link to each area. These areas are defined by coordinates.
Thus when the visitor clicks on the image, USEMAP="#menuline"
tells the browser to go to the map file named menuline
to determine the required links and hotspots.
Here are the lines for the map file named menuline with
a discussion to follow:
I will explain later how these numbers in the COORDS attribute were derived.
I placed the MAP element right after the opening
BODY tag but it can be placed anywhere
in the BODY of the HTML document. The map file and the image itself are
two separate and distinct objects which combine to produce an effect.
Having the image map data for an image map in a completely
separate HTML file is not supported by Firefox and possibly by other browsers as well. Therefore you should place the map
file in the same HTML document as the image tag that references the map.
The MAP element provides ALL the image map
data. All the information on the hotspots in the image
is found here. Note that MAP is a container
element in that everything between the opening and closing MAP tags is part of
the map file.
The MAP element has one attribute which is the
NAME attribute. In our example, the value of the NAME attribute
is menuline (NAME="menuline") which matches the name in the IMG
tag. Note that the # symbol is not required here.
Note that this map file contains a number of AREA
tags which are located between the opening and closing MAP
tags. Recall that our image has four regions or areas and that is why there are four
AREA tags. In other words, each hot zone is defined by an AREA tag.
The HREF attribute specifies the URL that the hotspot
points to. Thus if the visitor clicks in the first hotspot, the browser
will load my home page which is called index.htm. You can of course
link to a web page located anywhere on the World Wide Web. Just make sure
to include the complete URL of the web page you are linking to.
The AREA tag is also used to define the
SHAPE of the region or hotspot. Note that the
SHAPE of each region or hotspot is that of a
SHAPE="rect" could also be written as
SHAPE="rectangle". As we will learn in the next section, the
shape can also be a circle or a polygon.
The COORDS attribute defines the
coordinates of the shape.
The above coordinates in our map file can be broken down as follows:
Note that for <AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">,
the "0,0,100,24" breaks down into two pairs of coordinates - namely
0,0 and 100,24. The first
pair of coordinates represents the top left corner of the rectangular region and the
second pair represents the bottom right corner of the rectangle. That's all it takes
to define a rectangular region - two pairs of coordinates.
With any pair of coordinates, such as with 100,24, the
first number (100) represent the horizontal
distance in pixels from the left side
of the image and the second number (24) represents
the vertical distance in pixels
from the top of the image.
Note that ALL the numbers in the COORDS
attribute are separated with commas (,).
I have also seen pairs of coordinates separated with a space as in:
However, the World Wide Web Consortium (the W3C) recommends using commas for separators.
If you think back to the Mathematics classroom, points on a graph are
often written in the form (x,y) where x
represents the horizontal distance from the center (or origin) and
y represents the vertical distance from
the center. Thus a rectangular hotspot is defined as COORDS="x1,y1,x2,y2"
where x1,y1 is the top left corner point
of the rectangle and x2,y2 is the bottom
right corner point of the rectangle. Thus you can translate
the COORDS attribute for the second region
or hotspot as "The rectangle goes from x=101, y=0 to x=200, y=24".
Thus what the MAP element does is lay a point graph
(a map) over the image. The map is simply an invisible grid of points. The image is
there for the visual. It is only there for the user to see and use as
a guide. It is the map that is laying on top of the image that is used by
the browser - thus the name IMAGE MAP.
Now where do these coordinates come from? I got them from Paint Shop Pro
but you can get them from any paint program. For example, if you have a paint
program, save this image without the image map. I named it
map1.gif. Here is the image without the image map:
Now load the image into your paint program. With Paint Shop Pro, when you move the mouse pointer over the image
you can see the coordinates changing on the status bar at the bottom of
the screen. Note that the top left corner is 0,0 and that the bottom right
corner of the first hotspot is around 100,24. I simply recorded these
numbers and entered them in the AREA tag. Note that
coordinates for any hotspot is based on the fact that the top
left corner of any image is defined to be 0,0.
If you do not have a paint program, you can download your own
copy of Paint Shop Pro, by choosing "Download Paint Shop Pro and Mapedit"
from the links at the very top of this page.
There are also image map making software that will do all the work for
you in creating an image map and we will get into that later in this lesson.
The rectangle is not the only shape involved in image maps. The following
section deals with all the possible shapes for an image map.
Problem 1: If the URL for CNN is www.cnn.com/
and if the hotspot is a rectangle defined
by 25,70 and 115,135
what would be the AREA tag?
Here is our second image map. Note that it has four regions or hotspots: The triangle
(which is classified as a polygon), the circle, the rectangle and the yellow
area around these three shapes. Please take a moment to test this image map by clicking
into the four regions.
Here is another look at the image map with the coordinates marked on the
As stated above, this image map contains different shaped areas or hotspots.
Here is a summary of the various shapes allowed in an image map.
rect - rectangle. We already
studied this one so here is a brief summary. Two pairs of
coordinates are needed to specify a rectangle (in our red rectangle they are
129,28 and 175,108). The first pair of coordinates
specifies the top left corner of the rectangle and the second pair
specifies the bottom right corner of the rectangle. I got these coordinates
by loading the image into Paint Shop Pro and then recording the mouse pointer
positions in the top left and bottom right corners of the rectangle.
circle - A circle is defined by its
center and its distance from the center to any point
on the circumference of the circle (called the radius of the
circle). Thus in our example 67,97,34 means that the
center of the circle is located at 67,97
and the radius is 34 pixels.
Again I got these numbers in Paint Shop Pro by doing my best to pinpoint
the center of the circle with the mouse pointer and recording the numbers
from the status bar at the bottom of the screen. To find the radius, I first recorded
the coordinates of a point on the circle (33,97) that was on the
same horizontal line as the center, as shown in the above image. I
then subtracted the horizontal distances (the x's) to find the radius (r=67-33=34).
poly - polygon. A polygon is a
figure that can have any number of sides. The
one in the above image has three sides and is called a triangle. I could have drawn a four sided
figure (a quadrilateral) or a five sided figure (a pentagon), etc. The
important thing to know is that a polygon is built up by a list of adjacent
vertices - that is, by a list of coordinates connected in order. They are all
connected in order with the last pair of coordinates in the list equalling the first pair
of coordinates. This way there are no openings in the polygon. This is
much like a game of connecting the dots where all the dots are connected
in order and last dot is connected to the first dot. In our example, the
coordinates that make up the triangle are 16,13,35,62,72,27,16,13.
Note that my first point 16,13 in the triangle is connected to the second point 35,62
which is connected to the third point 72,27 which is connected to the first
point 16,13. The first and last points must be the same. In general, the
coordinates of a polygon have the form x1,y1,x2,y2,x3,y3, ... ,xn,yn,x1,y1
where xn,yn is the last point in the polygon which is then connected back to the first point.
You can use the full words rectangle, circle
and polygon for the SHAPE attribute or you can use their
abbreviations rect, circ and
THE DEFAULT AREA OF AN IMAGE
Our "shapes" image has four hotspots: the triangle, the rectangle, the circle and the default
area around these shapes. Our default area loads my web page that gives a list of all
topics studied in these lessons (topics.htm). In our example, the default area is defined by:
The default area should only be used once in a map
file and must be the last AREA tag listed. It is used
to indicate what should happen if the user selects a region which is not defined in
any of the other AREA tags.
Hotspots are checked in the order they appear
in the map file and the URL corresponding to the first
match is returned. Thus if two or more hotspots overlap,
the hotspot defined first in the map file takes
precedence over subsequent hotspots. Here is how it
all works with our example. In our MAP file, the first AREA tag listed is:
This AREA tags represent the polygon area of the image (which is our triangle).
When a visitor clicks on the image, the browser will first check to see if the coordinates of
the clicked point fall within the area defined by this polygon. If the answer is "yes", that is,
the visitor clicked in the triangle, then my Home Page will load. If the answer is "no", that is,
the visitor did not click in the triangle, the browser will then check the next AREA tag listed which is:
The browser now checks to see if the coordinates of the clicked point matches the area defined
by our circle. If the answer is "yes", my introduction page is loaded. If the answer is "no",
the browser then checks the next AREA tag which is the red rectangle defined by:
This AREA tag represents the rest of the image since the triangle, circle and rectangle were
already checked. The coordinates from 0,0 to 200,150
represents the full size of the image which covers all the default areas.
Any paint program will give the size of the image which is then also used for the WIDTH
and HEIGHT attributes in the IMG tag (<IMG SRC="map3.gif" WIDTH="200"HEIGHT="150" BORDER="0" USEMAP="#shapes" ALT="Image Map">).
Remember that the default area must be the last AREA tag in the list of
AREA tags as the other hotspots need to take precedence over it. This means in our example,
that if the coordinates do not fall within the first three AREA tags, it must lie in the
default area of the image.
Note: Instead of the above AREA tag for the default area, many image map software
(including Mapedit and Paint Shop Pro which we will use later in this lesson) will
give the following for the default area:
<AREA SHAPE="default" HREF="topics.htm">
This statement tells the browser that any area in the image not defined in earlier
AREA tags is considered to be the default area and if the visitor clicks anywhere
in this default area, then "topics.htm" is to be loaded. Note that in this statement, the
default area or hotspot does not have any coordinates.
There is a problem with using SHAPE="default" that
you should be aware of. The default value for the
SHAPE attribute works fine in Firefox, but some older versions of
Internet Explorer do not recognize the
default value. This means that the default area (topics.htm in our
example) will not load in those browsers. For this reason, if you require a default URL
it is best to do it using the SHAPE="rect" as in:
Problem 4: If the center of a circle is 30,65
and one point on the circle is 120,65, what would
be the COORDS attribute in the AREA tag?
Problem 5: It is acceptable to use percentages instead
of pixels in the COORDS attribute. With this method, the values are interpreted
as percentages of the image's width and height
respectively. If the AREA tag is:
There are a number of paint programs to choose from. Two of
the more popular ones are Corel Paint Shop Pro Photo and Adobe Photoshop.
You can try these programs for a period of time after which a decision to purchase must be
made. This lesson uses Corel Paint Shop Pro Photo X4 (version
14) and if you do not have a copy,
you can download one by clicking on the following link:
If you do not want to come up with all the image map coordinates yourself, there are
a number of image map making programs to choose from. Two popular ones are
Mapedit from Boutell.com and Corel's own Paint Shop
Pro Photo. We will first create an
image map with Mapedit and then we will create an image map with Paint Shop Pro.
So, to do the next section, you will need Mapedit
which you can obtain by clicking on the following link. It is a small program so it
will not take very long to download.
The following search engine panel example came with permission from an internet company
called Connpad. However, they have since ceased to exist and so the
link in the circle will not display the Connpad website and will instead display my home page.
If you are connected to the internet, you can click into the various regions to see the image map at work.
We will now use Mapedit to create the above image map.
Let's first create an HTML document that displays the
image that we want to turn into an image map. This way Mapedit can update the image
tag by adding the USEMAP attribute and also insert the
Map element with all the AREA tags. In other words, Mapedit will
update the HTML document for you by adding all the necessary tags and attributes.
So before we open Mapedit, let's first create an HTML document according to the following steps:
Please SWITCH to your text editor such as NotePad and enter the following:
<TITLE>Links to Search Engines</TITLE>
Please choose from among the following Search Engines or click on the
circle to visit my home page.
<P ALIGN="center"><IMG SRC="toolpane.gif" WIDTH="440" HEIGHT="100"
BORDER="0" ALT="Image Map"></P>
Now save this HTML document naming it engines.htm
(or use any suitable name of your choosing). Note that this document
does not contain a MAP element and that the IMG tag does not
contain the USEMAP attribute. As you will see, Mapedit will insert into this
engines.htm document, the USEMAP attribute and
the MAP element.
Next, save the image into the same
folder as engines.htm. Here is the image again, this time without the image map:
To save the image, click with the right mouse button to display a drop-down menu.
Choose the Save picture or image option to save the image. Use
the same name toolpane.gif. Note: The image can be either
a gif image or a jpeg (jpg) image.
Once the HTML document (engines.htm) and
the image (toolpane.gif) are in the same
folder, here are the steps involved to create the image map:
Open Mapedit and soon the What Do You Want To Do?
dialog window opens up. Choose Open A Web Page. If you don't
get the What Do You Want To Do dialog window, choose File
--> Open HTML Document.
Browse to the folder where you saved the HTML document named engines.htm.
Click on the name engines.htm and then click on
The image toolpane.gif is now displayed in the Mapedit window.
You may now wish to enlarge the Mapedit window by clicking on the little Maximize
button in the top right corner of the Mapedit window.
We are now ready to create our image map. Let's first take care of
the link to Yahoo. There are three tools located in the Toolbar for drawing the shapes to create the hotspots.
They are .
You will use these three tools for drawing hotspots. The first one (the one on
the left) is used to create a rectangular hotspot and is called the Add
Rectangles tool. The middle one is used to create a circular hotspot and is
called the Add Circles tool. The third one is used to create an irregular
shaped hotspot (a polygon shaped hotspot) and is called the Add Polygons tool. Note
in the picture below that the left end of the Yahoo hotspot is rounded.
You may have been wondering why the W3C did not include
oval shapes with the other shapes because often
ovals and curved ends look nicer than rectangles. Some map imaging programs do include the
oval shape as a forth choice. However, the oval shape is also known to create
problems in browsers and it is therefore recommended that you not
choose that option. Instead, if you have an oval shape or a curved end
in your image, simply place a rectangle around the shape as shown below
in the Yahoo hotspot -
which means that the hotspot will extend a little beyond the curvature
but that is okay.
Now click on the rectangle tool to
select it. Move the mouse pointer to the top left corner of the region for
Yahoo and click once with the left mouse button and hold it down.
Now drag the mouse pointer to the bottom right
corner of the region so that the entire Yahoo region is enclosed with a rectangle as follows:
Release the mouse button and immediately the Object URL
dialog window is displayed. If you make a mistake, just click on Cancel and
both the Object URL window and the box around Yahoo will disappear and you can then try again.
Click in the top box labelled URL for clicks on this object
and type the complete URL for Yahoo which is (do not add quotes or anything else):
In the next box labelled Alternate (ALT) Text, type:
Yahoo. Mapedit will place this in the ALT attribute as
the alternative text for this part of the image map. In the Help file, Mapedit states
"When your page is viewed by a web browser that does not support graphics, the user may
also be presented with a menu of the text alternatives, instead of an image. Up-to-date
versions of the popular Lynx browser support this feature. Old versions of Netscape will display the
ALT text as pop-up text (when the mouse pointer moves over the hotspot). However, this
feature of Netscape does not work reliably. We DO NOT RECOMMEND relying heavily on this
feature to display ALT text as pop-up text. It often fails to work if the user has to
scroll the window and there may be other flaws as well. This is a problem with
and it has nothing to do with Mapedit. ALT text is intended for non-graphics browsers."
In the Mouse-Over (TITLE) Text box, leave the checkbox beside
Same As ALT selected. Mapedit states that "some web
browsers such as Microsoft Internet Explorer (but not Firefox) will display the TITLE text as "pop-up" text when
the mouse pointer moves over the hotspot. Mapedit will automatically set
the TITLE text to match the ALT text unless you choose to turn this feature off using
the "Same As ALT" checkbox. If you choose to turn off that checkbox, you must enter
the TITLE text separately."
The next box reads: Target (For frames; usually left blank!).
If your HTML document involves frames or if your HTML document is in a frame, you should type
the value top in the box as this will ensure Yahoo loading into
a full body of the current window. You can also type in the value blank
to load the page into a new blank window. For this example you
can leave this box blank.
Leave the remaining boxes blank.
Click on OK and the dialog window disappears
If you need to resize the hotspot, or move just one border in the
rectangle, or move the entire hotspot, first click on the Test and Edit Hotspots button, , to select it.
click on the hotspot you want to edit. This will place a rectangle around the hotspot
with plus signs (+) at the four corners and one in the middle. To
move a border to a new position, just drag a corner plus sign straight up or down, or to the left or right. You can also drag a
corner to enlarge or reduce the size of the rectangle. Click on the + sign in the middle
of the rectangle to move the entire hotspot region. To remove the
rectangle around the hotspot after you are finished editing, just click
somewhere away from the hotspot.
Repeat the above process by placing a rectangle around each search
engine's hotspot and use the following URLs (you can add the appropriate
For Infoseek, use http://go.com/
For Lycos, use http://www.lycos.com/
For Hotbot, use http://www.hotbot.com/
For Excite, use http://www.excite.com/
Now click on the circle tool in the Toolbar (the middle tool)
to place a circle around the circle in the lower right corner of
the image (to the right of the words "search panel"). Place the mouse pointer in the
center of the circle, click once and hold down the mouse
button. Now drag the mouse pointer so that a circle is drawn around the circle. When you are
satisfied, release the left mouse button and the Object URL dialog window is displayed.
In the Object URL window enter in the URL box:
Next, enter something like "Home Page" for the alternative text. When you are
finished placing the rectangles and circle, the image should look like:
At any time you want to make changes or to check your work, click on the
Test and Edit Hotspots tool,
from the Tools menu. You then click on the hotspot you want to work with.
We haven't mentioned anything about the default area around our
hotspots. In our example, if the visitor clicks outside any hotspot, we
want nothing to happen. Because we have not specified anything for the
default URL, Mapedit will assume that we want no default URL and will insert
the appropriate HTML coding for this (as you will see later). If you want a default
URL, you can do it in one of two ways:
Choose Edit from the menu bar and then choose
Edit Default URL. The Default URL
window opens up for you to enter the default URL.
Click on the Test and Edit Hotspots tool and then
in the default region. The Default
URL window opens up for you to enter the default URL.
Our next step is to save our work. Choose Save As
from the File menu and the Save As
dialog window opens up. The name of the HTML document (engines) has
already been placed in the File name box. If you want to change
the name of your document (engines.htm) and/or the location of the
document, you can do so now.
Click on Save and a dialog window opens up warning you
that the file already exists. Choose Yes to overwrite the file and
the updated document named engines.htm now containing the
USEMAP attribute and the MAP element will be saved.
To see the image map in action, make sure you are connected to the internet since we are
accessing various search engines. SWITCH to your browser, LOAD the file
named engines.htm and test your image map.
Now to see what Mapedit did to the document, SWITCH to NotePad, re-load
engines.htm as changes were made to the document. Note
that the image tag has been updated to include the USEMAP
attribute with the value #toolpane and that the
MAP file has been added. This is what mine looks like. Your
coordinates will likely be a little different due to the fact that we drew the
rectangles and circle in approximate positions. You may have also used
different alternative text for the ALT attributes.
Since we did not specify a default URL, Mapedit assumed that there would
not be one as indicated by the attribute nohref. The nohref="nohref" indicates that the particular hotspot points
to nothing. Thus if you have an area in your image map which is to do
nothing, just use the NOHREF attribute. Remember that only Firefox recognizes the
"default" value for the SHAPE attribute (shape="default").
Internet Explorer does not recognize default as a value for SHAPE
and so will ignore this AREA tag which is okay because we don't have a default URL
anyway. In fact, you could leave out this AREA tag altogether and everything will
still work as planned.
The style="border-style:none in the IMG tag is a
Style Sheet statement that says that we did not choose a style for
the border. Style Sheets are studied in Lessons 30, 31 and 32 in my Additional Lessons.
You may have noticed all those forward slashes at the end
of each area tag just before the
greater than sign (/>). This is to satisfy one of the rules of
XHTML is studied in detail in Lessons 42, 43 and 44 in my Additional Lessons. You can
leave out the forward slashes without affecting the image map.
The same explanation is true for the id="toolpane". It was added
to satisfy the latest versions of XHTML. It serves the same
purpose as name="toolpane". However, since a number of browsers do
not recognize the ID attribute, both attributes
are included in the coding. Thus you can also safely leave out the ID attribute.
The DIV element can also be omitted without affecting the image map.
It is of course easiest to include all the coding as generated by Mapedit as it also
satisfies the latest HTML standards.
Problem 6: In the above AREA tags from Mapedit, what is the
center and radius of
the circle hotspot?
Recall that when you open Mapedit, a dialog window opens up asking What Do You Want To Do? For the above example,
you chose Open A Web Page. The other choice is Open An Image. If you
choose this second option, you proceed in exactly the same way as above and when you save
your work, all the
necessary coding will be saved in a web page. If required, you can then copy and paste the coding into another HTML document.
Problem 7: What are ALL the HTML statements necessary to create an image map
for the following image? The conditions are given below the image.
Here are the conditions:
The hotspots are to take approximately the positions of the following
outlined rectangles (the URLs and e-mail address do not exist as this is an example for
illustration purposes only):
The name of the image is to be menu.gif
There is to be no border around the image.
The width of the image is 117 pixels and the height is 146 pixels and
the image is to have no border.
The name of the map file is to be business
The coordinates of the top left corner and bottom right corner for each
rectangle and the URL to be used is given as follows:
For the Home rectangle it is 21,4
and 96,31 and the URL is index2.htm
For the Product Information rectangle it is
5,38 and 113,77 and the
URL is product.htm
For the Place Order rectangle it is 5,83
and 113,110 and the URL is order.htm
For the E-mail us rectangle it is 11,114
and 107,139 and the e-mail address is
There is to be no default URL.
Include appropriate ALT and TITLE attributes. If you wish,
you can leave out any unnecessary tags, attributes and forward slashes.
An image map in Paint Shop Pro is created with the Image
Mapper. Image Mapper does a great job in creating image maps.
We will be using the same image that we used in the last section with Mapedit. Here is
that image again:
If you want to follow along, just choose a folder or create a new
folder and save the above image to that folder. As you will see when you save the image,
the name of the image is toolpane.gif.
The second step is to load into Paint Shop Pro the image that you just saved, or
you can choose another image that you want to convert into an image map. So open Paint
Shop Pro. From the File menu, choose Open. Browse to
the folder that contains the image. Click on the image name and click on
Open. The image should now be displayed in Paint Shop Pro.
We now need to open the Image Mapper program. To do this, choose
File --> Export --> Image Mapper. The Image Mapper
dialog window opens up with your image in the Preview window.
Here is what you should have so far if you chose toolpane.gif
for the image:
Just above the Cell Properties are seven tools for creating the
image map. Here are these seven tools:
Starting from the left, we have:
The Arrow tool, . After you draw a hotspot
you click on this tool to select the hotspot in order to assign a link and alt text to it.
The Mover tool,
. This tool allows you to move or reposition a hotspot.
This is done by the "click and drag" method. That is, click on the image with the left
mouse button, and then while holding down the mouse button, drag the hotspot to where you want
The Polygon tool, . Your polygon tool may have a different
picture on it. This tool is used to create hotspots that have an irregular
shape to them (those shapes that are not circles, squares or rectangles).
The Rectangle tool, . This tool is used to create a rectangular or square hotspot.
The Circle tool, . This tool is used to create a circular hotspot.
The Delete tool, . This tool is used to delete a hotspot.
The Pan tool, . This tool is used to move an image that is too large
to fit in the Preview window. For example, if the right side of the image is
not in view, the Pan tool will allow you to move the image so that the right side of
the image comes into view.
Let's now draw our first hotspot. Here are the steps:
Clicking on the Rectangle tool to select it. Draw a rectangle
over the Yahoo hotspot. To do this, move the mouse pointer to the top left corner of
the region for Yahoo, click and hold down the left mouse button. Now drag the
mouse pointer to the bottom right corner of the region so that the
entire Yahoo region is enclosed with a rectangle as follows:
If you make an error or want to start over, you can click on the Delete
tool to erase the parts you need to delete. If the positioning of the rectangle is not quite right, you can click on the
Mover tool and drag to the correct spot. Note that there are
two little handles on the green rectangle - one at the top left corner and
one at the bottom right corner. These handles are called nodes. If
the rectangle around the hotspot is not quite big enough or a little too big or
if you need to adjust one of the sides, you can
do it with these nodes. First click on the arrow key. Then click on the hotspot
you need to adjust. This will select the hot spot. Then click and drag one of
the two nodes a little to adjust a side or to adjust the size of the hotspot.
Note that the x and y positions of the hotspot
are displayed just below the Target box. The top left corner of the image
is defined to be (0,0).
Next, click on the Arrow tool and in the URL box
enter the URL for Yahoo which is:
In the next box labelled Alt text, type: Yahoo.
Paint Shop Pro will place this in the ALT attribute as the alternative text for this
part of the image map.
You can leave the Target box blank. As stated above in the Mapedit section, if
your HTML document involves frames or if your HTML document is in a frame, you should
choose the value _top in the Target's pop-up box as this will ensure
Yahoo loading into a full body of the current window. You can also use the value
_blank to load the page into a new blank window.
Repeat this process by placing a rectangle around each search
engine's hotspot and use the following URLs (you can add the appropriate
For Infoseek, use http://go.com/
For Lycos, use http://www.lycos.com/
For Hotbot, use http://www.hotbot.com/
For Excite, use http://www.excite.com/
Here is the panel with the rectangular hotspots.
As you can see in the above image, the rectangle around the Altavista hotspot
is green while the rectangles around the
rest of them are red. The
green rectangle indicates the hotspot that
is currently selected (or active) and its two
nodes are visible, while the
red rectangles indicate the remaining
inactive hotspots. You can choose different colors for the active and
inactive hotspots by clicking on the Preferences button. In
the resulting dialog window, click in the Active map border color box and
from the resulting palette, choose a color. Do the same for
the Inactive map border color. Click OK to return to
Now click on the Circle tool so that we can place a circle around
the circle in the lower right corner of the image (to the right of the words "search panel").
Place the mouse pointer in the center of the circle and click the left mouse
button and hold it down. While holding it down, drag the mouse pointer so that a circle
is drawn around the circle. When you are satisfied, release the mouse button. Here is what you
Note that the green circle has two nodes so that you can adjust the size of the
circle if necessary. In the URL box, enter the URL:
Next, enter something like "Home Page" for the alternative text.
If you want to delete all the hotspots and start over, just click on the
Clear button at the bottom of the dialog window.
If you have an irregular shape, you choose the Polygon tool. When using
the Polygon tool, you begin by choosing a point on your image and click once. Then
move the cursor over to the next spot and click again. A colored line traces out the
path as you click away from one spot to the next. To complete the hotspot, your last
click (the ending point) needs to be on top of the first click
(the starting point). Here is an example of an irregular shaped hotspot tracing out the
State of Texas on a U.S. map drawn with the Polygon tool.
Note that each click produced a node that you can move or adjust to make
a perfectly drawn image map.
When you are finished creating the hotspots, you then need to
save your work. To do this:
Click on the Save As button.
This will display the HTML Save As dialog window.
Paint Shop Pro is first going to create an HTML file that contains
all the necessary coding for your image map to work. So type in a suitable name for the web
page (such as MyImageMap.htm), choose where you want to save the image
and then click on Save.
Now the Image Map Save As dialog window opens up. Type in a name for your
image. You can use the same original name (toolpane.gif) or choose
a new name such as SearchEngines.gif. Make sure that you are saving the
image to the same folder as the web page and then click on Save
to save the image. You are now back in the Image Mapper window.
Click on the Save Settings button if you also want to save the image
map settings. Saving the map settings allows you to load the
settings back into the same image or into a different image at another time.
In other words, saving the settings will allow you continue working on the image
map at a later time. Just load in the image and then load in the settings.
The settings will be saved with the extension .jmd
You can load the settings back into Image Mapper by clicking on the
Load Settings button.
That's it. You can now load the HTML file (MyImageMap.htm) into
NotePad if you wish to see the coding that Paint Shop Pro created.
If necessary, you can transfer this coding to an existing web page.
You can also load the web page into your browser to test the hotspot. From your
browser, you can also see the coding by choosing Source from the
You can also preview your image map in your browser from the Image
Mapper by simply
clicking on the Preview in browser button which is the eye,
If one of the colors in your image is not displaying in your web page, then it is because
the color has been designated as transparent. To further control the image, click on the
Optimize Image button. This will display the GIF Optimizer
dialog window where you can specify full or partial transparency, image loading
format (interlaced or non-interlaced), and so on.
As stated above, when creating a hotspot, the x and y coordinates for the
hotspot are given below the Target box. For example, suppose for the Yahoo hotspot we have:
On our web page, in the MAP element, Paint Shop Pro will translate these coordinates into
<AREA SHAPE="rect" COORDS="2,9,111,44" HREF=...>
Problem 8: In the above AREA tag created by Paint Shop Pro, the COORDS
What are the coordinates of the top left corner of the hotspot and what are the
coordinates of the bottom right corner of the hotspot?
Hotspots are checked in the order they appear in the map file. Thus if
two or more hotspots overlap, the hotspot defined first in the map file takes
precedence over subsequent hotspots. Therefore you must place your hotspots
in order from the most important hotspot to the least important. If you
have a circle inside of a rectangle, you need to place the circle
shape first in the map file so that when a visitor clicks into the circle, it will
take precedence over the rest of the rectangle. The "default" hotspot is generally
placed last in the list.
The name of the image map is shapes. That is,
shapes is the name of the map file containing all
the image map data.
The center is given (30,65), but the radius is not given. So we need to
find the radius. Since the center and the point on the circle (120,65) are on
the same horizontal line (they are both 65 pixels from the top of the image),
the radius would be 120-30=90 pixels. Thus the COORDS attribute would be:
The browser would interpret this statement as a rectangular hotspot extending
from the left side of the image to 50% (or half) of the image's width. The height
of the hotspot would be the full height of the image (100%).
My coordinates for the circle shape are 416,70,17 which means that the center is
at 416,70 and the radius is 17 pixels.
Since there is no default area URL in the image, I left out the AREA tag that would have
defined the default area. Also, whether you use all lower case letters or have the ALT attribute before
the COORDS attribute does not matter. In other words,