HTML Image Maps: Create Interactive Images

Learn how to create interactive image maps in HTML using the `

Creating Image Maps with HTML

HTML image maps allow you to create interactive images where different areas trigger specific actions when clicked. This is a great way to add engaging elements to your web pages.

Understanding Image Maps

Image maps are created using the <map> and <area> elements. The <map> element defines the clickable regions on an image, and the <area> elements define each individual clickable area.

The image itself is linked to the map using the usemap attribute.

<img src="image.jpg" usemap="#myMap">
<map name="myMap">
  <area ...>  
</map>

The name attribute of the <map> tag must match the value of the usemap attribute (without the #).

Defining Clickable Areas (<area>)

Each clickable area is defined with the <area> element. Key attributes include:

• shape: Defines the area's shape (rect, circle, poly, or default).
• coords: Specifies the area's coordinates. The format depends on the shape.
• href: The URL to navigate to when the area is clicked.

Rectangular Areas (shape="rect")

Coordinates are specified as x1,y1,x2,y2 (top-left and bottom-right corners).

<area shape="rect" coords="34,44,270,350" href="computer.htm" alt="Computer">

Circular Areas (shape="circle")

Coordinates are specified as x,y,radius (center coordinates and radius).

<area shape="circle" coords="337,300,44" href="coffee.htm" alt="Coffee">

Polygonal Areas (shape="poly")

Coordinates are a list of x,y pairs defining the polygon's vertices.

<area shape="poly" coords="10,10,10,50,60,50,60,10" href="croissant.htm" alt="Croissant">

Using JavaScript with Image Maps

You can trigger JavaScript functions when an area is clicked using the onclick attribute within the <area> tag.

<area shape="rect" coords="10,10,100,50" href="#" onclick="myFunction()" alt="Click Me">

Summary Table