How to Build Image Maps Without an Image Map Editor
How to Build Image Maps Without an Image Map Editor GA S REGULAR Menu Lifewire Tech for Humans Newsletter! Search Close GO Software & Apps > Design
When you create an image map, you are creating an area that is clickable on the image, so the map's coordinates must line up with the height and width of the image you selected. Maps support three different types of shapes: rect—a rectangle or four-sided figurepoly—a polygon or multi-sided figurecircle—a circle To create the areas, you must isolate the specific coordinates you intend to map. A map may consist of one or more defined areas on the image that, when clicked, open a new hyperlink. For a rectangle, you map just the top left and bottom right corners. All coordinates are listed as x,y (over, up). So, for the upper left corner 0,0 and the lower right corner 10,15 you would type 0,0,10,15. You then include it in the map:
For a polygon, you map each x,y coordinate separately. The Web browser automatically connects the last set of coordinates with the first; anything inside these coordinates is part of the map.
Circle shapes only require two coordinates, like the rectangle, but for the second coordinate, you specify the radius or the distance from the center of the circle. So, for a circle with the center at 122,122 and a radius of 5 you would write 122,122,5:
All areas and shapes may be included in the same map tag:
How to Build Image Maps Without an Image Map Editor
Image maps are just simple HTML tags
By Jennifer Kyrnin Jennifer Kyrnin Freelance Contributor University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. lifewire's editorial guidelines Updated on March 14, 2021 Tweet Share Email Tweet Share Email Design Graphic Design Photoshop Animation & Video 3D DesignWhat to Know
• Use a normal size image that the browser won't rescale. You'll also need an image editor and an HTML or text editor. • When inserting the image, add an extra attribute to identify the map's coordinates. • For example: This article explains how to create Image Maps using HTML tags instead of an image map editor. Most image editors will show you the coordinates of your mouse when you point in the image, which is all the data you need to get started with image maps. Jonathan Minster/Getty ImagesCreating an Image Map
To create an image map, first select an image that will serve as the basis of the map. The image should be "normal size"—that is, you should not use an image so large that the browser will scale it. When you insert the image, you'll add an extra attribute that identifies the map's coordinates:When you create an image map, you are creating an area that is clickable on the image, so the map's coordinates must line up with the height and width of the image you selected. Maps support three different types of shapes: rect—a rectangle or four-sided figurepoly—a polygon or multi-sided figurecircle—a circle To create the areas, you must isolate the specific coordinates you intend to map. A map may consist of one or more defined areas on the image that, when clicked, open a new hyperlink. For a rectangle, you map just the top left and bottom right corners. All coordinates are listed as x,y (over, up). So, for the upper left corner 0,0 and the lower right corner 10,15 you would type 0,0,10,15. You then include it in the map:
For a polygon, you map each x,y coordinate separately. The Web browser automatically connects the last set of coordinates with the first; anything inside these coordinates is part of the map.
Circle shapes only require two coordinates, like the rectangle, but for the second coordinate, you specify the radius or the distance from the center of the circle. So, for a circle with the center at 122,122 and a radius of 5 you would write 122,122,5:
All areas and shapes may be included in the same map tag: