Categories
Learn HTML

HTML: map tag

HTML: <map> tag

In this series of learning HTML, we will teach you how to use an HTML map tag with proper syntax and lots of examples. Let’s start on the HTML map tag.

Description of HTML map tag

The HTML <map> tag is used in conjunction with the <area> tag to define an image map, which is a clickable image with defined regions that link to specific web pages or execute specific actions.

The <map> tag is used to define the image map and must be used in combination with the <img> tag. The <map> tag specifies the name of the map, and the <area> tag defines the clickable regions and the corresponding links.

Here’s an example of using the <map> tag to define an image map:

<img src="example.jpg" alt="Example Image" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,50,50" href="page1.html" alt="Page 1">
<area shape="rect" coords="50,0,100,50" href="page2.html" alt="Page 2">
<area shape="rect" coords="0,50,50,100" href="page3.html" alt="Page 3">
<area shape="rect" coords="50,50,100,100" href="page4.html" alt="Page 4">
</map>

In this example, the <img> tag is used to display an image, and the usemap attribute specifies the name of the map to use. The <map> tag defines the map with the name “examplemap”, and the <area> tags define the clickable regions and the corresponding links.

The shape attribute of the <area> tag specifies the shape of the clickable region, which can be “rect” (rectangle), “circle”, or “poly” (polygon). The coords attribute specifies the coordinates of the region, and the href attribute specifies the URL to link to. The alt attribute specifies alternative text that is displayed when the image cannot be loaded or when the user hovers over the region.

Using the <map> tag allows for more interactive and visually appealing web pages, as images can be turned into clickable maps that link to specific pages or actions.

Syntax to use HTML map tag

The HTML <map> tag is used to define an image map for an <img> element. An image map is a way to associate different parts of an image with different hyperlinks or actions. Here is the basic syntax of the <map> tag:

<img src="image.png" usemap="#mapname">
<map name="mapname">
<!-- map definition goes here -->
</map>

In this syntax, the src attribute of the <img> element specifies the URL of the image that the map is associated with. The usemap attribute specifies the name of the <map> element using a hash symbol followed by the name of the map. The <map> element contains the definition of the map.

Within the <map> element, you can use the <area> tag to define clickable areas of the image. The <area> tag has several attributes that specify the shape and coordinates of the clickable area, as well as the action or hyperlink associated with it. Here is an example of how to define an image map using the <map> and <area> tags:

<img src="worldmap.png" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="https://en.wikipedia.org/wiki/North_America">
<area shape="rect" coords="100,0,200,100" href="https://en.wikipedia.org/wiki/South_America">
<area shape="rect" coords="0,100,100,200" href="https://en.wikipedia.org/wiki/Europe">
<area shape="rect" coords="100,100,200,200" href="https://en.wikipedia.org/wiki/Africa">
</map>

In this example, an image map is defined for a world map image using the <map> and <area> tags. Each <area> tag defines a rectangular clickable area of the image and the href the attribute specifies the hyperlink associated with it.

Overall, the <map> tag is a useful way to create interactive and clickable images in HTML, and it can be styled using CSS to customize the appearance of the clickable areas.

 

 

Global Attributes

The <map> tag in HTML is used in conjunction with the <area> tag to create an image map. Image maps allow you to define clickable areas on an image, which can be linked to different pages or parts of a website.

The <map> tag has several global attributes that can be used to modify its behavior:

  1. name: Specifies a name for the map. This name is used to associate the <map> element with the <img> element that uses it.
  2. class: Specifies one or more class names for the map. This attribute can be used to apply CSS styles to the map.
  3. id: Specifies a unique ID for the map. This attribute can be used to target the map with JavaScript.
  4. style: Specifies inline styles for the map.
  5. title: Specifies a title for the map. This attribute is used to provide additional information about the map.
  6. tabindex: Specifies the order in which the map is accessed using the keyboard. This attribute is used to improve accessibility for users who navigate using the keyboard.

These global attributes can be applied to many other HTML elements as well, not just the <map> tag.

 

Event Attributes

In HTML, event attributes can be added to elements to define JavaScript code that is executed when a specific event occurs. Here are some common event attributes that can be used with the <map> tag:

  1. onclick: Specifies a function to be executed when the user clicks on the map.
  2. onmouseover: Specifies a function to be executed when the user moves the mouse over the map.
  3. onmouseout: Specifies a function to be executed when the user moves the mouse away from the map.
  4. onfocus: Specifies a function to be executed when the map receives focus (i.e. is selected using the keyboard).
  5. onblur: Specifies a function to be executed when the map loses focus.

These event attributes can be used to add interactivity to your image map, such as displaying tooltips or highlighting the clickable areas. However, it’s important to use these attributes sparingly and to make sure they don’t interfere with the accessibility of your website. For example, if you use the onclick attribute, you should also make sure that the same action can be performed using the keyboard.

 

 

 

Other Attributes

In addition to global and event attributes, the <map> tag in HTML also supports several other attributes that are specific to its functionality as an image map:

  1. alt: Specifies alternative text that should be displayed if the image cannot be loaded or if the user is using a screen reader. This attribute is required for accessibility purposes.
  2. coords: Specifies the coordinates of the clickable area(s) in the image. The values are relative to the top-left corner of the image and depend on the shape of the clickable area (e.g. for a rectangle, the value should be “left,top,right,bottom”).
  3. shape: Specifies the shape of the clickable area(s) in the image. The possible values are “rect” (for rectangles), “circle” (for circles), and “poly” (for polygons).
  4. target: Specifies the name of the frame or window where the linked document should be displayed. This attribute is used in conjunction with the <area> tag to specify the target of the link.

These attributes are specific to the functionality of image maps and are not used in other HTML elements. When using the <map> tag and the associated <area> tags, it’s important to use these attributes correctly to ensure that your image map is accessible and functions correctly.

Notes on HTML map tag

Here are some important notes to keep in mind when using the <map> tag in HTML:

  1. Accessibility: When creating an image map, it’s important to provide alternative text using the alt attribute and to ensure that the map is accessible to users who rely on assistive technology, such as screen readers.
  2. Validity: Make sure your <map> and <area> tags are placed within an <img> tag, and that the usemap attribute of the <img> tag points to the name of the <map> tag. This will ensure that your HTML code is valid and that the image map works as expected.
  3. Coordination: The coords attribute specifies the coordinates of the clickable area(s) in the image, and the shape attribute specifies the shape of the clickable area(s). Make sure these attributes are set correctly to ensure that your clickable areas are accurate and easy to use.
  4. Cross-browser compatibility: Some older browsers may not support image maps or may handle them differently. Test your image map in different browsers to ensure that it works correctly for all users.
  5. Performance: Image maps can sometimes slow down page loading times, especially if the image is large or if there are many clickable areas. Consider using other techniques, such as CSS, to achieve the same functionality if performance is a concern

Browser Compatibility

The HTML map tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML map tag

We will discuss the <map> tag below, exploring examples of how to use the <map> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

 

We will discuss the HTML map tag below, with some examples of how to use the map tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

 

HTML5 Document

Here’s an example of using the HTML5 map tag to create an image map:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map">
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html">
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html">
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html">
</map>
</body>
</html>

In this example, we have an image (example.jpg) and we’re using the map tag to define three clickable areas within the image. Each clickable area is defined using the area tag, which has a shape attribute (rect, circle, or poly) and coords attribute to define the area’s shape and position within the image.

We’ve also specified a href attribute for each area tag, which defines the destination of the link when the user clicks on the clickable area.

Finally, we’ve included the usemap attribute on the img tag to specify that the image should use the map defined by the map tag with the name example-map.

Note that this is just a simple example, and that more complex image maps with multiple areas and different shapes can be created using the same approach.

 

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <map> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map">
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html">
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html">
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html">
</map>
</body>
</html>

The main difference between this example and the HTML5 example is the DOCTYPE declaration at the top of the document, which specifies that the document is using HTML 4.01 Transitional instead of HTML5.

Aside from that, the map and area tags work the same way in HTML 4.01 Transitional as they do in HTML5. We define the clickable areas within the image using the area tag, and specify their shape and position using the shape and coords attributes.

We also include the usemap attribute on the img tag to specify that the image should use the map defined by the map tag with the name example-map.

Note that the syntax of the map and area tags is slightly different in HTML 4.01 Transitional compared to HTML5. Specifically, we don’t use the self-closing syntax (<tag />) for the area tag, and we don’t include a closing </map> tag.

 

 

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <map> tag might look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map" />
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" />
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html" />
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html" />
</map>
</body>
</html>

In this example, we’re using an XHTML 1.0 Transitional document, which means that the syntax is stricter than HTML 4.01 Transitional. Specifically, we need to close all tags, including the img and area tags, and we need to include the xmlns attribute on the html tag.

Aside from those differences, the map and area tags work the same way in XHTML as they do in HTML 4.01 and HTML5. We define the clickable areas within the image using the area tag, and specify their shape and position using the shape and coords attributes.

We also include the usemap attribute on the img tag to specify that the image should use the map defined by the map tag with the name example-map.

Note that the syntax of the img, map, and area tags is slightly different in XHTML compared to HTML 4.01 and HTML5, but the functionality of the map tag remains the same.

 

 

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <map> tag might look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Image Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#example-map" />
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" />
<area shape="circle" coords="200,100,50" href="http://www.example.com/page2.html" />
<area shape="poly" coords="300,0,400,0,400,100,350,150,300,100" href="http://www.example.com/page3.html" />
</map>
</body>
</html>

In this example, we’re using an XHTML 1.0 Strict document, which means that the syntax is even stricter than XHTML 1.0 Transitional. Specifically, we can’t use deprecated elements and attributes, and we need to include a DOCTYPE declaration and the xmlns attribute on the html tag.

Aside from those differences, the map and area tags work the same way in XHTML as they do in HTML 4.01 and HTML5. We define the clickable areas within the image using the area tag, and specify their shape and position using the shape and coords attributes.

We also include the usemap attribute on the img tag to specify that the image should use the map defined by the map tag with the name example-map.

Note that the syntax of the img, map, and area tags is slightly different in XHTML compared to HTML 4.01 and HTML5, but the functionality of the map tag remains the same.

 

 

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <map> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML 1.1 Map Example</title>
</head>
<body>
<h1>XHTML 1.1 Map Example</h1>
<img src="example.jpg" alt="Example Image" usemap="#exampleMap" />
<map name="exampleMap">
<area shape="rect" coords="0,0,100,100" href="http://www.example.com/page1.html" alt="Link to Page 1" />
<area shape="rect" coords="100,0,200,100" href="http://www.example.com/page2.html" alt="Link to Page 2" />
<area shape="rect" coords="200,0,300,100" href="http://www.example.com/page3.html" alt="Link to Page 3" />
</map>
</body>
</html>

 

In this example, we have an image called “example.jpg” that we want to add clickable links to. We use the map tag to define the clickable areas on the image. The name attribute of the map tag is used to associate it with the image, which is done by setting the usemap attribute of the img tag to “#exampleMap” (where “exampleMap” is the value of the name attribute).

Inside the map tag, we define the clickable areas using the area tag. Each area tag has a shape attribute (which defines the shape of the clickable area) and a coords attribute (which specifies the coordinates of the area). In this example, we’re using rectangular areas with coordinates that define three separate links on the image. Each area tag also has an href attribute that specifies the URL to link to, and an alt attribute that provides alternative text for the link (which is read by screen readers and other assistive technologies).

This example is written in XHTML 1.1, which is a stricter version of HTML that requires all elements to be properly nested and closed. Note the use of the self-closing syntax for the img tag, which is required in XHTML.