How to Create an Image Map With HTML
An image map is a set of coordinates that divides the image into multiple "clickable" areas that link to other web pages or web sites. If you have a graphic or picture with different sections, you can use image maps to add some unique touches to your web site. They are commonly used as a form of web navigation, allowing visitors to click on the different links on the image in order to get to another part of the site. Image maps are simple to create for those with basic knowledge of HTML, and do not require any special scripts or programs to implement.
Other People Are Reading
Instructions
-
-
1
Select the image you plan on using as the background image for your image map. Graphics with different areas by shape or color that are easy for visitors to distinguish are best suited for creating image maps. Photographs are not recommended.
-
2
Select the different areas that you are going to have linked to other pages of your web site or elsewhere on the web. There are three types of areas you can use as links on your image map: RECT, CIRCLE and POLYGON. Also, there is no limit as to the amount of links you can add to your HTML image map.
-
-
3
Open up your image in any editing program in order to determine the coordinates of each area you have chosen for your image map. Microsoft Paint comes with many PCs, and can easily be used to find coordinates. If the "clickable" areas are rectangular in shape, you only need to find the top right and bottom left coordinates. For circular areas, only the center coordinates and the size of the radius are needed. Polygonal-shaped areas have multiple coordinates, and you will need to list them in order. Write down the coordinates of your image map for easy reference.
-
4
Insert the image on your web page by opening it up in a text editor (such as Notepad) and typing <IMG SRC="URL" USEMAP="#MAPNAME">. Replace URL with the location of your image, and MAPNAME with the name of the map you would like to use (this can be anything).
-
5
Create the image map by typing <MAP NAME="MAPNAME">. You can give the map any name you want, as long as it matches the name designated on the image. If the names on the map and the image do not match, then the image map will not work.
-
6
After the map code, type <AREA SHAPE="SHAPE" COORDS="A,B,C,D" HREF="URL">. Replace SHAPE with the shape of your area, and input the coordinates of your area in place of A,B,C,D. For instance, a rectangular shaped area would be <AREA SHAPE="RECT" COORDS="116,113,203,144" HREF="URL">. Replace URL with the URL address of the page you want this part of your image to link to.
-
7
After you have typed in the HTML code for all the areas of your image map, close out the map by typing </MAP> at the end.
-
8
Open up the page where you have inserted your image map in your web browser in order to test that your HTML is correct and that your image map works. You and your visitors can now click on different areas of an image and visit other areas of your site.
-
1
References
Resources
More Like This
Comments
-
actually I know how to map image but I want to open an anothe image on click not another page.
-
Nice document
-
Step 3 is slightly off: rect uses top left, bottom right coords, not top right, bottom left. I've seen this mistake many places online and as image mapping sucks, figure it should be corrected as much as possible!
