GUI - Creating Image Maps [LESSON]

Creating Image Maps

Image Maps

Image maps used to be used frequently on websites and still are used, but they aren't used as frequently as in the past. An image map is an image that has clickable regions or spots on the image that will take the user to another location. For the image map to work well, the site needs to be static (not change in size or movement). Therefore, image maps aren't responsive, so they don't fit into responsive web design. Additionally, image maps are not easy to add to a GUI website. You may need to know how to build an image map however, so what you can do if you are using a GUI editor is build the image map in HTML and then copy the HTML into the HTML section of the GUI editor (if it exists).  Most GUI editors will allow you to add some HTML to your site, but some don't allow this. Below is an example of an image map.

Linked Images

Most websites include images that pertain to the content showcased. As you create websites, you might decide to hypertext the logo so that it directs users back to the home page. This is a best practice that provides a quick point of reference for your audience. It will eliminate the time that would have been spent searching for the link to return to the home page.

To link images, you just put the image inside the link code.  See the example below:

To make sure you get the right source of the image, when you find the image, right-click on the image, and choose "Copy image address."

Creating Image Maps

In addition to defining an entire image as hypertext, you can also divide an image into sections, also referred to as hotspots, to direct your audience to different resources or websites. A good example of this process would be the United States map. The image could be divided by state so that when the user clicks on a specific state, they would be directed to a resource that would provide more information about the state. To create an image map, you need an image and markup. The <img> element is used to add the map image to the web page. You will also need to include the "usemap" attribute to inform your browser that the image map is part of the image. The map element will use the name attribute to identify the map. The value of the name should match the value of usemap in the <img> element that is associated with the map.

The code above creates an image map.  It doesn't have any hotspots to click on yet, but the image is there, and it is identified as an image map.

Now we will add the clickable areas.  We add these using the <area> element. You can create these areas in several shapes, you must identify the shape of the clickable area. These are the types of shapes you can use:

• rect – this defines the shape as a rectangle and is probably the most often used.
• circle – this defines the shape as a circle and is also often used.
• poly – this defines the shape as a polygon and is more difficult to use because it requires several points to be identified. If you want to outline each state as a clickable region, then you would use the poly attribute. You may not use the same images from the example image maps.
• default – this defines the entire region.

To use the rectangle shape you must find the coordinates on the image from the top left corner and the bottom right corner so the computer can draw the rectangle. These come in pairs, one for the x-axis and one for the y-axis.  

To create your rectangle area, you'd put the coordinates of the top left corner (890,497) and the bottom right corner (1007, 613).  This would be entered like this:

To enter the map coordinates for the circle, you would find the coordinates for the center of the circle and enter the radius you want to indicate the size of the circle. So here you would enter the coordinates – 943, 548 and the radius 61. 

To find the coordinates, you can put the image in an image editor such as Paint, Gimp, Photoshop, or other image editors.

For a polygon, you need to identify the coordinates for several points to create the shape.

To create the image map, you would enter the code like below:

See the GUI Image Map video below to walk through how to create a website with an image map linking to additional pages.

Image Maps Using JavaScript

One way that you can use image maps is to use JavaScript. To do this you would write a JavaScript function using a click event in the area element.

Learn more about Image Maps below by selecting each icon.

 

Learning Object Transcript Links to an external site.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION