How to Make a Clickable Map for the Web


Most images can only link to a single web page. Creating an clickable image map allows a single image to link to multiple pages. An image map breaks up a single image into regions, which are known as hot spots. Each hot spot can link to a different web page or section of a web page. You can create a simple clickable map using simple graphics software and basic HTML commands within a few minutes. Creating an image map with many hot spots, however, can be very time consuming, as each region needs to be defined on its own.

Things You'll Need

  • Graphics software
  • High-quality image
  • HTML or text editor

Image Definition

  • Choose an image that will not confuse your website visitors. Only use images for clickable maps that have distinct components. Avoid photographs where regions blend together and are not well-defined. Use a graphics editing software to sharpen colors and darken region borders to improve the image clarity.

  • Save the image in GIF or JPEG format; these are the only formats you can use with HTML.

  • Find image coordinates for each region. An image coordinate is a pair of numbers separated by a comma that represents the exact location of a point on an image. Use any simple graphics software to find the coordinates. Run the mouse over the image and look at the bottom of the screen. The coordinates are the pairs of numbers that change as you move the mouse.

  • Create image map hot spots based on region coordinates. You can create clickable map areas that are rectangular, circular or polygon.

    To create a rectangular hot spot, find the top left corner coordinates and then the bottom right coordinates of the region. Rectangular coordinates should follow this format: 110,124,200,190.
    The first two coordinates correspond with the top left and the last two correspond with the bottom right.

    To create a circular hot spot, find the coordinate of the center of the circle. You will also need to calculate the radius of the circle, which is the distance from the center of the circle to any point on the circle. Circular coordinates should use this format: 185,496,43. The first two numbers correspond with the coordinates of the circle's center and the last number corresponds with the radius.

    To create a polygon hot spot, list all the coordinates of region points in order. Use polygon hot spots whenever the region is any shape other than circular or rectangular. Polygon hot spots will have the following format: 56,67,60,78,70,62. In this example, the polygon is a triangle. The first two numbers match up with the coordinates of the first point on the triangle; the second set match up with the second point and the final two numbers match up with the triangle's third point. Choose any point to start with and follow the points in order.

    Create a chart marking down coordinates of all image hot spots for reference in Step Two of Section Two.

HTML Coding

  • Give your image map a name.
    Type the following command into your HTML editor:
    <map name="map-name">
    (place area tags here)
    Replace the words "map-name" with any name you choose that will represent your image map. Note that this is not the name of your image which you defined in the graphics software. This is the name of the map created from that image.

  • Insert area tags between the <map name="map-name"> and </map> in step one of section two.

    Use the following syntax to define the shape, coordinates and link target of a hot spot:
    <area shape="shape" coords="insert coordinates here" href="webpage.html">

    Replace the word "shape" with the values "circle", "rect" and "poly" to represent circular, rectangular and polygon shaped regions accordingly.

    Replace the words "insert coordinates here" with the coordinate values you found in Step Four of Section One.

    Replace the words "webpage.html" with the webpage you want the hotspot to link to.

    Insert a separate area command line for each hot spot you wish to create.

  • Insert the image map onto the web page using the image screen command.
    Use the following syntax: <img src="image.gif" usemap="#map-name">

    Replace the word "image.gif" with the name of the image defined in Step Two of Section One. Replace the word "map-name" with the name of the image map defined in Step One of Section Two, but do not remove the hash sign (#).

    The completed code should follow this format:
    <map name="map-name">
    <area shape="rect" coords="135,180,200,185" href="webpage1.html">
    <area shape="circle" coords="49,300,42" href="webpage2.html">
    <area shape="poly" coords="24,35,55,20,90,42,91,80,60,105" href="webpage3.html">
    <img src="image.gif" usemap="#map-name">

Related Searches


  • Photo Credit mouse image by Franc Podgor...¡ek from
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!