area Tag <area>: The Image Map Area element

What is the area tag <area>?

Imagine you have an image with different clickable sections. The <area> tag allows you to define those clickable areas within the image, turning them into hyperlinks. It essentially creates a “map” on your image.

How does it work?

1. The <area> tag works in conjunction with the <map> tag. You’ll define the image using the <img> tag, but to make specific parts clickable, you’ll create a separate <map> tag.
2. Inside the <map> tag, you’ll use multiple <area> tags, each defining a specific clickable region on the image.
3. An <area> tag defines the shape (rectangle, circle, polygon) and the coordinates of that clickable area on the image.

Structure:

The <area> tag goes inside the <map> tag, which is then linked to the image using the usemap attribute in the <img> tag. Here’s a simplified structure:

HTML

<img src="image.jpg" alt="Image description" usemap="#image-map">

<map name="image-map">
  <area shape="rect" coords="x1,y1,x2,y2" href="link1.html" alt="Link 1 description">  <area shape="circle" coords="x,y,radius" href="link2.html" alt="Link 2 description">  </map>

Example:

Let’s say you have an image of a world map and you want to make each continent a clickable link to a separate webpage. Here’s how you could achieve that:

HTML

<img src="world_map.jpg" alt="World Map" usemap="#world-map">

<map name="world-map">
  <area shape="rect" coords="0,0,150,100" href="europe.html" alt="Europe">  <area shape="rect" coords="150,0,300,100" href="asia.html" alt="Asia">  </map>

The coords attribute within each <area> tag defines the clickable region on the image using coordinates. Here’s a breakdown of coords and how to find them:

Understanding coords:

• coords specifies a comma-separated list of four numerical values that define a rectangular area on the image.
• The order is: X1, Y1, X2, Y2.
  • X1, Y1 represent the top-left corner of the rectangle (horizontal and vertical position).
  • X2, Y2 represent the bottom-right corner of the rectangle.

Finding Coordinates of an Image:

There are two main ways to find the coordinates for your clickable areas:

1. Image Editing Software: Most image editing software, like Photoshop, GIMP, or even Microsoft Paint, display the coordinates of your cursor position on the image. These coordinates usually appear in the bottom left corner of the software window.
   • By hovering your cursor over the desired corner points of your clickable area, you can read the corresponding X and Y values.
2. Trial and Error: While less precise, you can also use a bit of trial and error within your HTML code.
   • Start with estimated values for the coordinates and test your webpage in a browser.
   • If the clickable area isn’t exactly where you want it, adjust the values in your code and see how it affects the clickable region. Repeat this process until you achieve the desired result.

Example:

In your code, the first <area> tag has coords="0,0,150,100". This defines a clickable rectangle starting at the top-left corner (X1=0, Y1=0) with a width of 150 pixels (X2=150) and a height of 100 pixels (Y2=100). This would likely correspond to the area for “Europe” on your world map image.

Using image editing software to find the exact coordinates can save you time and frustration. However, trial and error within the code can also work for simpler cases.

rect for Rectangular Areas:

The shape="rect" attribute within the <area> tags specifies that the clickable region is a rectangle.

• Yes, rect is specifically used to define a rectangular clickable area on the image.
• It requires four comma-separated coordinates (X1, Y1, X2, Y2) to define the rectangle’s top-left and bottom-right corners.

Other Shapes for Clickable Areas:

While rect is commonly used, the <area> tag offers more flexibility for defining clickable shapes. Here are the other options:

• circle: This defines a circular clickable area. It requires three comma-separated coordinates (X, Y, radius). Here, X and Y represent the center of the circle, and radius defines the circle’s size.
• poly: This is used for creating polygonal clickable areas, like triangles, pentagons, or any other custom shape with multiple corners. It requires a list of comma-separated X and Y coordinates, defining each corner of the polygon in sequence.

Here’s an example using the circle shape:

HTML

<area shape="circle" coords="200,50,30" href="usa.html" alt="USA">

This would create a circular clickable area centered at X=200 and Y=50 with a radius of 30 pixels, likely corresponding to the area for “USA” on your world map.

Choosing the Right Shape:

The choice of shape depends on the specific clickable region you want to define on your image. Rectangles are suitable for simple regions, while circles can be useful for circular elements like buttons or flags. Polygons offer more flexibility for complex shapes.

In essence, the <area> tag transforms specific regions of your image into clickable hotspots, adding interactivity to your webpage.