Client-side imagemaps

Client-side imagemaps

Imagemaps are one of the more effective navigation tools used on Web pages. An image is created with potential distinct areas so that the page viewers can select where to go by clicking on one of these distinct areas. The image and the imagemap information are stored in a Web page. The graphical browsers translate the hot-spots (the distinct areas) of the image to page URLs, without needing a server to do so. This makes the page download faster and the development of imagemaps easier. See an example here. Click on the different fish sizes and see what happens.

Note: imagemaps can also be developed by storing the imagemap information in Web servers, instead of in the pages, for security reasons. I have tutorials on how to do it for NCSA and CERN Web servers if you need this information in the future.

This lesson uses a special software available for Windows, Linux/Unix and Macs -- Mapedit -- for helping define the image hotspots, distinct areas, of the image and relate them to Web pages URLs. Mapedit can be used 30 days for free and its registration costs only $15.00. The graphical examples shown in the tutorial are from the Windows version. Note: Mapedit is also available through CNet Downloads.

Imagemap development overview

In order to create client-side imagemaps you need to have two components:

an inline image saved in gif format: this will not be covered in this lesson, since we saw previously how to create and edit images. You can use software packages like PowerPoint, Corel Presentations, Freelance and/or Showcase for this purpose. You can also use images copyright-free that you can collect in the Net.
an HTML document using regular markups and including the inline image you selected or created. You will open this page in Mapedit to select hot-spots and map them to URLs, as explained next.

Creating a client-side imagemap file

To start this section you need to have the gif file that you will use as the clickable image. and an html page with this gif file inserted in the page.

Starting Mapedit

open Mapedit and you will see the following image:
click on Open a Web Page and select from the file menu the html page that has the gif file you want to use to create the imagemap (see the example page here).
as soon as you do it, Mapedit will select an image to be used as the image to be mapped, as shown here. In the example I created an image in PowerPoint with text content instead of art..
if I had two gif files inserted in my page Mapedit would ask what image I would like to use as shown in this example.

Creating the hot-spots

before you start creating hotspots, click on the drop-down File menu and select edit hostspot color and change the default from white to another color, e.g. blue or read, for you see clearly what you have selected as hotspot. Most pages/images have white backgrounds and the default white marks just blend in them and you cannot see what you are doing.
use the rectangle if, again, your image has areas of this shape. This is an example. As soon as you finish marking the hotspot (in the example selecting Merrick School of Business) a dialog appears for you to enter the absolute or relative address where the hotspot should lead to (in the example the MSB URL). In our example, I continued to mark University of Baltimore and State of Maryland as rectangles and entering their URLs as shown here.
use the circle if your image has areas of this shape. This example (from an old version of Mapedit) shows how the circle tool looks like. When you end drawing the circle another dialog will be displayed asking for the URL name for this hotspot. Enter the absolute or relative address, as applicable, where the hotspot should lead to.
use the polygon for all other cases. Left-click in the beginning and in each point of the part of the image you are drawing the contour. One more time, enter the absolute or relative address where the hotspot should lead to.
Select File, Edit Default URL and you will see a dialog to enter the URL for the case when the person does not click in the hotspots.
Please note that the order you define the hotspots will be the order the browser will use to resolve priorities when overlapping areas of your image are selected by the reader.

Saving and uploading

Before saving click on the drop down File menu and select Suppress blue border to avoid that your image be displayed with a blue border all around it. Note: if you see a blue border around your image you can also edit the source code and add border="0" in the image tag.
Select File Save, and your original HTML page will be saved with the client-side imagemap on it, or File Save As and give a new name to the page with the imagemap. You are done.
You can test the hotspots in Mapedit. Click on the arrow up and then select each hotspot in turn, and you will see a dialog with the corresponding URL, as shown in this example.
You can also test the imagemap page locally in your browser, before uploading it to your UB Web space.

Combining imagemaps with frames.

One of the most interesting applications of frames combined with an imagemap is to have an imagemap loaded in a left frame, for example, and the results of the choice of hotspots being shown in the right frame. Let me introduce the subject with another screen map as shown below:

We decided to have a top frame with a title and general information on the new page. Then the left frame would display an imagemap, and the right frame would display the results of clicking on the imagemap. This design splits the screen vertically (columns) and horizontally (rows) among the frames.

In the example the top frame got 100% of the columns but only 20% of the rows. Both the left and right frames got only 80% of the rows (the other 20% went to the top frame, as we saw). The left frame got 25% of the columns, while the right frame got the 75% remaining columns (this is similar to what we saw in the example at last class meeting in frames). See here the final product.

The following code (shown up to the NOFRAMES tag) implements the above design:

<html>
<head>
<title> Second example of frames </title>
<frameset rows="20%, 80%">
<frame src="page1.html" name="top" marginheight="1" scrolling="auto">
<frameset cols="25%, 75%">
<frame src="page2.html" name="left" marginheight="1" scrolling="no">
<frame src="page3.html" name="right" marginwidth="3" marginheight="1" scrolling="auto">
</frameset>
</frameset>
<noframes>

Once more, lets walk through the code:

First, we split the rows in two areas, one with 20% (where page1.html will be loaded), and another of 80% to be shared by the left and right frames.
then we load, in the beginning, page1.html into the top frame and allow it to scroll.
next, we split the columns between two frames, with 25% for one and 75% to the other.
finally, we load page2.html and page3.html, respectively, in the left and right frames. Please note that we made the left frame static (not scrollable) to keep the imagemap always in sight.
the remaining tags in this page are similar to the example of last class meeting.

Page2.html is the page where we decided to place the imagemap and load it in the left frame (as we saw above). This page was created as any other imagemap page is created, but thinking that we were only going to have 25% of the screen columns to display it (made it small). The code for the page2.html is shown below:

<html>
<head>
<title>Background Colors</title>
</head>
<body bgcolor="#000000" link="#000000">
<IMG SRC="colorimg.gif" usemap="#colorimg" border="0"></A>
<p>
<div>
<map id="colorimg" name="colorimg">
<area shape="rect" alt="" coords="0,1,172,33" href="white.html" title="" target="right" />
<area shape="rect" alt="" coords="2,33,173,57" href="wy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,57,172,83" href="vly.html" title="" target="right" />
<area shape="rect" alt="" coords="1,82,172,108" href="ly.html" title="" target="right" />
<area shape="rect" alt="" coords="1,107,173,135" href="gy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,136,173,163" href="bgy.html" title="" target="right" />
<area shape="rect" alt="" coords="0,163,172,187" href="yo.html" title="" target="right" />
<area shape="rect" alt="" coords="1,187,171,212" href="lb.html" title="" target="right" />
<area shape="rect" alt="" coords="0,211,173,239" href="bg.html" title="" target="right" />
<area shape="rect" alt="" coords="0,239,172,264" href="bb.html" title="" target="right" />
<area shape="rect" alt="" coords="0,264,173,290" href="s.html" title="" target="right" />
<area shape="rect" alt="" coords="0,289,171,316" href="r.html" title="" target="right" />
<area shape="default" href="../none.html" alt="" />
</map>
</div>
</body>
</html>

Looks impressive, right? But, it is very simple. The only difference from the above to a regular imagemap tag is the inclusion of target="right" and Mapedit was used to include the target right as shown below:

An additional benefit of the use of frames with imagemaps is that if the browser cannot see images, for sure it cannot see frames, and the regular linear page is shown. This way the imagemap page can be designed for imagemap viewers only, for the text readers will get the linear, text, page.

This page is maintained by Al Bento who can be reached at abento@ubalt.edu. This page was last updated on January 15, 2010. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.