How to Create an Image Map Using HTML Programming
Understanding HTML is one of the most resourceful programming language to use in order to construct a webpage. HTML uses tags to add attributes to your webpages. The four tags most used by HTML documents are <HTML>, <HEAD>, <TITLE>, and <BODY ...>. These tags define the type of document it is, and the major sections. HTML documents usually have the extension .html or .htm. You can use HTML to create an image map that divides an image into different areas that link to a different web page. If you choose to create image maps, you should use images that have several distinct areas that readers can select. Photographs usually are not a good choice for image maps. Creating image maps is a good way to give your pages more appeal. This guide will teach you how to add image maps to your page. It presents a very simple approach to customizing your page.
Other People Are Reading
Instructions
-
-
1
Start your word processor or text editor that you will use to create your web page. Locate the page on your PC that you will be editing. Add the image you want to use an image map to your web page. Include it inside of the <CENTER> tag.
-
2
Type "USEMAP=“#?” inside of the <IMG> tag. Replace the question mark with the name of the image map. Type "</CENTER>" to close the tag.
-
-
3
Type "<MAP NAME=“?”>" Replace the question mark with the image map name. Your text should look like the following:<CENTER><IMG SRC=“name.gif” USEMAP=“#menumap”></CENTER><MAP NAME=“menumap”>
-
4
Type "<AREA SHAPE=“?”" Replace the question mark with the shape of the area. Use rect for rectangle, circle for circle and poly for an irregular shape.
-
5
Type "COORDS=“a,b,c,d”" for the coordinates of a rectangle. Replace the "a and b" with the coordinates of the top left corner. Replace "c and d" with the coordinates of the bottom right corner. For a circle, type "COORDS=“a,b,r”" where "a, b" are the coordinates for the center of the circle and "r" is the radius. For a polygon, type "COORDS=“a,b,c,d…”" where "a,b,c,d" are the coordinates of each point on the polygon.
-
6
Type "HREF=“?”". Replace the question mark with the address of the webpage that you want the image area to link to. Repeat steps 4 to 6 for each image area. Type "</MAP>" to complete your image map.
-
7
Verify that your text is similar to the following:<AREA SHAPE “rect” COORDS=“31,50,155,120” HREF=“website.html”></MAP>
-
8
Open a new web browser to verify that your web page displays the image map correctly. Test your site and verify that visitors can click on an area of the image map to display the linked web page.
-
1
Tips & Warnings
You should display your web page in several browsers to see how each browser will display your page.
