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
<AREA SHAPE="CIRCLE" COORDS="298,178,46" HREF="https://www.yourwebsite.com/Author.html" TITLE="Author"> <AREA SHAPE="RECT" COORDS="422,202,509,235" HREF="https://www.yourwebsite.com/EBooks.html" TITLE="EBooks"> <AREA SHAPE="CIRCLE" COORDS="277,288,47" HREF="https://www.yourwebsite.com/Gallery.html" TITLE="Gallery"> <AREA SHAPE="RECT" COORDS="59,322,146,356" HREF="https://www.yourwebsite.com/Weblog.html" TITLE="Weblog"> </MAP> <IMG SRC="https://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!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
