g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

Creating an Image Map with Handy ImageMapper by Silverage Software

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.

www.silveragesoftware.com

  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">
</MAP>
<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!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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 Editor Wanted for details.



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


BellaOnline Editor