Back to home

HTML Image Maps

Image Maps

Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:

Workplace Computer Phone Cup of coffee

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

Workplace

Create Image Map

<map name="workmap"> </map >

The Areas

Then, add the clickable areas. A clickable area is defined using an element.

Shape

♦ rect - defines a rectangular region
♦ circle - defines a circular region
♦ poly - defines a polygonal region
♦ default - defines the entire region

Shape="poly"

Click on the croissant to go to a new page and read more about the topic:

French Food Croissant

We have to find the x and y coordinates for all edges of the croissant:

This is the area that becomes clickable and will send the user to the page "croissant.html":