g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Creating an Image Map with Handy ImageMapper by Silverage Software

Guest Author - Diane Cipollo

An image map is an image that works as one large menu link button. Well, not exactly. Because it is one image, if it worked like the usual hyperlink button, clicking on it would take you to only one destination. However, an image map is usually used as a menu which links to several webpages of a website. How can this be done?

Certain areas of the menu image can be designated as hot zones, or active areas. Each active area is associated with a different webpage destination. Any image can be used as a menu image map. The magic is in creating the active areas. Like anything else about the WWW, there is more than one way to do this. Most graphics programs, such as AdobeR PhotoshopR , have an image map feature that you can use to create the active areas. However, all you really need is a simple freeware program, called Handy ImageMapperR , which can be downloaded for free from the Silverage Software website. After you have downloaded the program, follow the steps below to create an image map from either a GIF, JPG, PNG or BMP image.


  1. Open the program and you will see a big, empty white space. To place your image into this space, click on the folder icon and then navigate to the image you wish to use. Double click on the image to import it into Handy ImageMapper.

    Now you have the option to draw a rectangle, circle or polygon shape to designate the active areas on your menu image. Click on one of these icons.

  2. Click and drag to draw the shape over the area of the image you wish to be active and associated with a link destination. The active area will be indicated by a semi-transparent shape floating over the area. If you make a mistake, just click on the delete icon (X) and start again.

    Under the shape icons, you will find the Coords section. You will see the coordinates for this active area listed in the box.

  3. Under the Coords section is the Tooltip input box. A tooltip is the text that pops up when you place your mouse over this active area. It should be one or two words that tell the reader something about the destination webpage for that link. Type your tooltip into the text input box.

  4. The next section down is the HREF hyperlink URL input box. Type, or copy and paste, the http:// URL for the destination webpage into this box.

  5. By default, the image map will be named map1. If you prefer, you can rename the image map in the bottom input box.

  6. Repeat steps 2 to 4 for each hyperlink in your menu image.

    When you are finished creating the active areas on your menu image, click the Place On Clipboard button and the program will generate the HTML code for your image map and place the code in your clipboard.

  7. Open the file for your webpage and paste the HTML code from the program into the webpage code. It will look something like the code below.

<MAP NAME="map1">
<AREA SHAPE="CIRCLE" COORDS="298,178,46" HREF="http://www.yourwebsite.com/Author.html" TITLE="Author">
<AREA SHAPE="RECT" COORDS="422,202,509,235" HREF="http://www.yourwebsite.com/EBooks.html" TITLE="EBooks">
<AREA SHAPE="CIRCLE" COORDS="277,288,47" HREF="http://www.yourwebsite.com/Gallery.html" TITLE="Gallery">
<AREA SHAPE="RECT" COORDS="59,322,146,356" HREF="http://www.yourwebsite.com/Weblog.html" TITLE="Weblog">
<IMG SRC="http://www.yourwebsite.com/images/DianeCipollo.jpg" USEMAP="#map1" BORDER="0">

As you can see from the example, the X and Y coordinates for each active area, along with the tooltip and URL location for the webpage associated with it, are listed in the <MAP> map tag. Under this, is the <IMG> image tag. You will notice that the URL in the image tag is the location of the image as it is stored on your hard drive. (C:\ ...) You will want to change this to the actual URL of the image as it is stored on your website. The USEMAP=#map1 code in the image tag associates the image with the map tag (MAP NAME=map1). This code should be pasted into the webpage or webpages where you wish to use the image map.

This site needs an editor - click to learn more!

Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Twitter Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Facebook Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to MySpace Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Del.icio.us Digg Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Yahoo My Web Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Google Bookmarks Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Stumbleupon Add Creating+an+Image+Map+with+Handy+ImageMapper+by+Silverage+Software to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor