crus4

logo

HTML map Tag


The HTML <map> tag is used to define an image map. An image map looks like an ordinary image but it contains clickable areas. We can define these areas with one or more area tags. You can click on these clickable areas and it will take you to any other web page. The best advantage of the <map> tag is that we can easily link any part of the image to any other web page, without dividing the image.

In an below example, let’s write a code for the image map.

Example

<!DOCTYPE html>
<html>
<head>
 <title> HTML image map </title> 
<body>

<h2>Image Maps</h2>
<p>Click on the logo or the text (crus4) to open a new page </p>

<img src="https://images.app.goo.gl/rUb19jaiGRsQLGGx6" alt="imagemap" usemap="#codemap" width="400" height="379">

<map name="codemap">
  <area shape="rect" coords="66, 117, 131, 168" alt=" text" href="https://crus4.com/web-development/">
  <area shape="rect" coords="290,172,333,250" alt="icon" href="https://crus4.com/python/">
  <area shape="circle" coords="33o, 106, 407, 159" alt="dot" href="https://crus4.com/computer-network/">
</map>

</body>
</html>

Related Posts

Images in HTML

HTML Colors

HTML map Tag – crus4