LESSON TWENTY - IMAGE MAPS

You may read the following sections in their entirety
or use these choices to go directly to a section.

| Introduction to Image Maps | | Creating our first Image Map | | Creating our second Image Map | | Download Paint Shop Pro and Mapedit | | Using Mapedit to create an Image Map | | Using Paint Shop Pro to create an Image Map | | Overlapping Hot Spots - Summary |

INTRODUCTION TO IMAGE MAPS

 What is an image map?

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

  1. Image maps provide an alternative to loading a page containing several linked images.
  2. 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.
  3. Image maps can provide an aesthetically pleasing alternative to cluttered pages.
  4. 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. That is, the links in the image map are also repeated somewhere on the web page as text links as in:

| <A HREF="index.htm">Home Page</A> | <A HREF="intro.htm">Introduction</A> |

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.

| top | | bottom |

CREATING OUR FIRST IMAGE MAP

We will now study our first image map and we will do it with the above image. Here again is the image.

Here are the statements that give this image map.

First we have the image tag which is:

<P ALIGN="center"><IMG SRC="map1.gif" WIDTH="400" HEIGHT="25" BORDER="0" USEMAP="#menuline" ALT="Image Map"></P>

Discussion:

  1. 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.
  2. 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.
  3. The width of the image is 400 pixels and the height is 25 pixels.
  4. 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.
  5. 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 USEMAP="#Menuline".
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:

<BODY>
<MAP NAME="menuline">
<AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">
<AREA SHAPE="rect" COORDS="101,0,200,24" HREF="intro.htm">
<AREA SHAPE="rect" COORDS="201,0,300,24" HREF="lesson21.htm">
<AREA SHAPE="rect" COORDS="301,0,400,24" HREF="topics.htm">
</MAP>

  1. I will explain later how these numbers in the COORDS attribute were derived.
  2. 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.
  3. Having the image map data for an image map in a completely separate HTML file is not supported by Netscape and 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.
  4. 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.
  5. 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.
  6. 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 with an AREA tag.
  7. 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.
  8. 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 RECTANGLE. SHAPE="rect" could also be written as SHAPE="rectangle".
  9. The COORDS attribute defines the coordinates of the shape. As we will learn in the next section, the shape can also be a circle or a polygon.

    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:

    COORDS="0,0 100,24"

    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 a 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. 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?

| Click here to go to the answer section |

| top | | bottom |

CREATING OUR SECOND IMAGE MAP

 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.

Image Map

Here first is the IMG tag:

<IMG SRC="map3.gif" WIDTH="200" HEIGHT="150" BORDER="0" USEMAP="#shapes" ALT="Image Map">

Problem 2: What is the name of the image?

Problem 3: What did I name the image map?

| Click here to go to the answer section |

Here is the image map file for the above map3.gif image:

<MAP NAME="shapes">
<AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.htm">
<AREA SHAPE="circle" COORDS="67,97,34" HREF="intro.htm">
<AREA SHAPE="rect" COORDS="129,28,175,108" HREF="lesson21.htm">
<AREA SHAPE="rect" COORDS="0,0,200,150" HREF="topics.htm">
</MAP>

Here is another look at the image map with the coordinates marked on the image:

Image Map

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.

  1. rect - rectangle. We have 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.
  2. 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).
  3. 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 equaling 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.
  4. You can use the full words rectangle, circle and polygon for the SHAPE attribute or you can use their abbreviations rect, circ and poly.

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:

<AREA SHAPE="rect" COORDS="0,0,200,150" HREF="topics.htm">

Discussion:

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:

<AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.htm">

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:

<AREA SHAPE="circle" COORDS="67,97,34" HREF="intro.htm">

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:

<AREA SHAPE="rect" COORDS="129,28,175,108" HREF="lesson21.htm">

Again if the answer is "yes", my JavaScript lesson will load. If the answer is "no", then the next AREA tag is checked which is:

<AREA SHAPE="rect" COORDS="0,0,200,150" HREF="topics.htm">

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 Netscape and 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:

<AREA SHAPE="rect" COORDS="0,0,200,150" HREF="topics.htm">

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:

<AREA SHAPE="rect" COORDS="0,0,50%,100%">

how would the browser interpret this statement?

| Click here to go to the answer section |

| top | | bottom |

DOWNLOAD PAINT SHOP PRO AND MAPEDIT

 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 30 days after a decision to purchase must be made. This lesson uses Corel Paint Shop Pro Photo X2 (version 12) and if you do not have a copy, you can download one by clicking on the following link:

Paint Shop Pro

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.

Mapedit

| top | | bottom |

USING MAPEDIT TO CREATE AN IMAGE MAP

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.

Image Map

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:

  1. Please SWITCH to your text editor such as NotePad and enter the following:

    <HTML>
    <HEAD>
    <TITLE>Links to Search Engines</TITLE>
    </HEAD>
    <BODY>
    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>
    </BODY>
    </HTML>

  2. 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.
  3. 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:
  1. Open Mapedit and soon the What Do You Want To Do? dialog window opens up.
  2. Choose Open A Web Page.
  3. Browse to the folder where you saved the HTML document named engines.htm. Click on the name engines.htm and then click on Open.
  4. The image toolpane.gif is now displayed in the Mapedit window.
  5. 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.
  6. 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.
  7. 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.
  8. 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:

  9. 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.
  10. Click in the top box labeled URL for clicks on this object and type the complete URL for Yahoo which is (do not add quotes or anything else):

    http://www.yahoo.com/
     

  11. In the next box labeled 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 the browser and it has nothing to do with Mapedit. ALT text is intended for non-graphics browsers."
  12. In the Mouse-Over (TITLE) Text box, leave the checkbox beside Same As ALT selected. Mapedit states that "some newer web browsers, such as Microsoft Internet Explorer 4.0 and up (but NOT including Netscape as of version 4.5), will display the TITLE text as "pop-up" text when the mouse pointer moves over the hotspot. Mapedit 2.5 and later 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."
  13. 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. If you are not using frames, you can leave this box blank.
  14. Leave the remaining boxes blank.
  15. Click on OK and the dialog window disappears
  16. If you need to move or resize the hotspot or move just one border in the rectangle, first click on the Test and Edit Hotspots button, , to select it. Then just click on the hotspot you want to edit. This will place a rectangle around the hotspot. To move a border to a new position, just click any corner of the rectangle and drag the corner straight up or down, or to the left or right. You can also drag a corner to enlarge or reduce 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.
  17. Repeat the above process by placing a rectangle around each search engine's hotspot and use the following URLs (you can add the appropriate "Alternative text"):

    For Infoseek, use http://infoseek.go.com/
    For Lycos, use http://www.lycos.com/
    For Hotbot, use http://www.hotbot.com/
    For Excite, use http://www.excite.com/
    For Altavista, use http://www.altavista.com/

  18. 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:

    http://www.htmltutorials.ca/

    Next, enter something like "Home Page" for the alternative text. When you are finished placing the rectangles and circle, the image should look like:

  19. 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.
  20. 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:
    1. 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.
    2. Click on the Test and Edit Hotspots tool and then double-click anywhere in the default region. The Default URL window opens up for you to enter the default URL.
  21. 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.
  22. 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.

<P ALIGN="center"><IMG SRC="toolpane.gif" WIDTH="440" HEIGHT="100" ALT="Image Map" usemap="#toolpane" style="border-style:none"></P>
<div>
<map id="toolpane" name="toolpane">
<area shape="rect" alt="Yahoo" coords="4,8,110,43" href="http://www.yahoo.com/" title="Yahoo" />
<area shape="rect" alt="Infoseek/Go" coords="111,8,220,43" href="http://infoseek.go.com/" title="Infoseek/Go" />
<area shape="rect" alt="Lycos" coords="221,8,327,43" href="http://www.lycos.com/" title="Lycos" />
<area shape="rect" alt="Hotbot" coords="328,8,433,43" href="http://www.hotbot.com/" title="Hotbot" />
<area shape="rect" alt="Excite" coords="4,52,110,86" href="http://www.excite.com/" title="Excite" />
<area shape="rect" alt="Altavista" coords="111,52,225,86" href="http://www.altavista.com/" title="Altavista" />
<area shape="circle" alt="Home Page" coords="416,70,17" href="http://www.htmltutorials.ca/" title="Home Page" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

Discussion on the above coding statements:

  1. Note the last area tag. It says:

    <area shape="default" nohref="nohref" alt="" />

    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 Netscape and Firefox recognize 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.

  2. 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.
  3. You may have noticed all those forward slashes just before most of the greater than signs (/>). This is to satisfy one of the rules of XHTML, the latest W3C web standard and current version of HTML. 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.
  4. 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.
  5. The DIV element can also be omitted without affecting the image map.
  6. 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?

| Click here to go to the answer section |

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 the web page, all the necessary coding will be in the 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:

  1. 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):

    Image Map

  2. The name of the image is to be menu.gif
  3. There is to be no border around the image.
  4. The width of the image is 117 pixels and the height is 146 pixels and the image is to have no border.
  5. The name of the map file is to be business
  6. 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 business@bus.com

  7. There is to be no default URL.
  8. Include appropriate ALT and TITLE attributes. If you wish, you can leave out any unnecessary tags, attributes and forward slashes.

    | Click here to go to the answer section |

USING PAINT SHOP PRO TO CREATE AN IMAGE MAP

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:

Image Map

  1. 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.

  2. 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.

  3. 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:

image map

Just above the Cell Properties are seven tools for creating the image map. Here are these seven tools:

image map

Starting from the left, we have:

  1. 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.
  2. 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 it.
  3. The Polygon tool, . This tool is used to create hotspots that have an irregular shape to them (those shapes that are not circles, squares or rectangles).
  4. The Rectangle tool, . This tool is used to create a rectangular or square hotspot.
  5. The Circle tool, . This tool is used to create a circular hotspot.
  6. The Delete tool, . This tool is used to delete a hotspot.
  7. The Pan tool, . This tool is used to move an image that is too large to fit in the Preview window. As you can see, my image is too wide to fit into the Preview window. The Pan tool allows me 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:

  1. 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, and click once 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. 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.

  2. 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).

  3. Next, click on the Arrow tool and in the URL box enter the URL for Yahoo which is:

    http://www.yahoo.com/

  4. In the next box labeled 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.
  5. 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. If you are not using frames, leave this box blank.
  6. Repeat this process by placing a rectangle around each search engine's hotspot and use the following URLs (you can add the appropriate alternative text):

    For Infoseek, use http://infoseek.go.com/
    For Lycos, use http://www.lycos.com/
    For Hotbot, use http://www.hotbot.com/
    For Excite, use http://www.excite.com/
    For Altavista, use http://www.altavista.com/

    Here is the panel with the rectangular hotspots.

  7. 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 Image Mapper.

  8. 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 should have:

    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:

    http://www.htmltutorials.ca/

    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:

  1. Click on the Save button or on the Save As button. This will display the HTML Save As dialog window.
  2. 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.
  3. 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.
  4. 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 View menu.

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 attribute reads:

COORDS="2,9,111,44"

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?

| Click here to go to the answer section |

| top | | bottom |

OVERLAPPING HOTSPOTS - SUMMARY

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.

| top | | bottom |

Home Page Product Information Place order E-mail us

Yahoo Infoseek/Go Lycos Hotbot Excite Altavista Home Page

ANSWERS

  1. The AREA tag would be:

    <AREA SHAPE="rect" COORDS="25,70,115,135" HREF="http://www.cnn.com/">

  2. The name of the image is map3.gif.
  3. The name of the image map is shapes. That is, shapes is the name of the map file containing all the image map data.
  4. 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: COORDS="30,65,90"
  5. 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%).
  6. 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.
  7. The image tag would be something like:

    <IMG SRC="menu.gif" WIDTH="117" HEIGHT="146" BORDER="0" USEMAP="#business" ALT="Image Map">

    The MAP file would be something like:

    <MAP NAME="business">
    <AREA SHAPE="rect" COORDS="21,4,96,31" HREF="index2.htm" ALT="Home Page" TITLE="Home Page">
    <AREA SHAPE="rect" COORDS="5,38,113,77" HREF="product.htm" ALT="Product Information" TITLE="Product Information">
    <AREA SHAPE="rect" COORDS="5,83,113,110" HREF="order.htm" ALT="Place Order" TITLE="Place Order">
    <AREA SHAPE="rect" COORDS="11,114,107,139" HREF="mailto:business@bus.com" ALT="E-mail us" TITLE="E-mail us">
    </MAP>

    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,

    <area shape="rect" alt="Home Page" coords="21,4,96,31" href="index.htm" title="Home Page">

    is also acceptable and is in fact what Mapedit produced in the map file.

  8. The coordinates of the top left corner is (2,9) and the coordinates of the bottom right corner is (111,44). These coordinates give rise to the numbers in the COORDS attribute (2,9,111,44).

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty-One |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2009 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca