Html 简明教程
HTML - Image Map
HTML 中的图像地图允许图像的特定区域可点击，充当到不同目的地的链接。此技术可用于在网页上创建复杂的导航系统或交互式图形。
An image map in HTML enables specific areas of an image to be clickable, acting as links to different destinations. This technique is useful for creating complex navigation systems or interactive graphics on a webpage.
通过在图像内定义各种形状（矩形、圆形、多边形），每个形状都有自己关联的链接，开发人员可以创建动态和交互式的可视化内容，从而增强用户参与度和导航。
By defining various shapes (rectangles, circles, polygons) within an image, each with its own associated link, developers can create dynamic and interactive visual content that enhances user engagement and navigation.
Why to use Image Map?
HTML 中的图像映射通过定义图像中的可点击区域来高效地创建交互式图形。这允许用户与图像的不同部分进行交互，从而触发特定操作或链接。
Image maps in HTML efficiently create interactive graphics by defining clickable regions within an image. This allows users to interact with different image parts, triggering specific actions or links.
图像映射可用于创建复杂的导航、交互式图表或引人入胜的可视化体验，从而增强了网页上的用户参与度和交互性。
Image maps are useful for creating complex navigation, interactive diagrams, or engaging visual experiences, enhancing user engagement and interactivity on web pages.
HTML <map> Tag
在 HTML 中， * <map>* 标记用于创建客户端图像映射，将图像的特定区域转换为交互式元素。这允许用户单击图像的不同区域，从而触发各种操作。 <map> 元素充当 <area> 元素的容器，每个 <area> 元素使用特定属性定义一个可点击区域。
In HTML, the <map> tag is used to create a client-side image map, turning specific regions of an image into interactive elements. This allows users to click on different areas of the image, triggering various actions. The <map> element serves as a container for <area> elements, each defining a clickable region with specific attributes.
<map name="world map">
<!-- Define your clickable areas here -->
</map>HTML <area> Tag
HTML 中的 * <area>* 标记在 <map> 元素内使用，用于定义图像上的可点击区域。它为每个可点击区域指定形状、坐标和关联的操作。
The <area> tag in HTML is used within the <map> element to define clickable regions on an image. It specifies the shape, coordinates, and associated actions for each clickable area.
Rectangular Area
如果需要矩形区域，我们必须将 "rect" 传递为值。矩形需要左上角和右下角的坐标。
We have to pass "rect" as value if need the area in rectangular shape. Rectangles require coordinates for the top-left and bottom-right corners.
<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">-
x1, y1: Coordinates of the top-left corner.
-
x2, y2: Coordinates of the bottom-right corner.
Circular Area
如果需要圆形区域，我们必须将“圆”传递为值。圆需要中心坐标和半径。
We have to pass "circle" as value if need the area in circular shape. Circles need the center coordinates and radius.
<area shape="circle" coords="x,y,r" href="url" alt="Description">-
x, y: Coordinates of the circle’s center.
-
r: Radius of the circle.
Polygon Area
"poly" 如果需要多边形的面积，则必须传递作为值。多边形需要一系列坐标来形成形状。这可用于创建任何形状，无论是芒果还是苹果。
We have to pass "poly" as value if need the area in the shape of any polygon. Polygons require a series of coordinates to form the shape. This can be used to create any shape whether it be a mango or apple.
<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="Description">其中， x1, y1, …, xn, yn: 形成多边形的坐标。
Where, x1, y1, …, xn, yn: Coordinates forming the polygon.
这些形状能够创建交互式图像地图，通过将特定区域与图像中的特定操作相关联，从而增强用户参与度。
These shapes enable the creation of interactive image maps, enhancing user engagement by associating distinct actions with specific areas within an image.
HTML Image Map
要在 HTML 中创建图像地图，请按照下列步骤使用代码示例。
To create an image map in HTML, follow these steps with a code example.
-
Step 1 - Prepare your image: Begin with an image you want to turn into an image map. For this example, let’s use an image named ".jpg."
-
Step 2 - Define the image map: Use the <map> tag to define the image map, and give it a unique name using the name attribute.
-
Step 3 - Define clickable areas: Within the <map> element, you can define clickable areas using <area> tags. Specify the shape (rect, circle, or poly), the coordinates, and the URL to link to. Here’s an example with a clickable rectangle.
为要在图像中创建的每个可单击区域重复 Step 3 。关闭 HTML 文件并将其另存为扩展名为 .html。
Repeat Step 3 for each clickable area you want to create within the image. Close the HTML file and save it with .html extension.
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<img src=
"https://www.tutorialspoint.com/images/logo.png"
usemap="#image_map">
<map name="image_map">
<!-- Define your clickable areas here -->
<area shape="circle" coords="45,32,49"
href="index.htm" alt="tutorialspoint">
<area shape="rect" coords="245,50,85,9"
href="tutorialslibrary.htm"
alt="tutorials_library">
</map>
</body>
</html>执行上述示例后，将显示一个带有 Tutorialspoint 徽标的页面。如果您单击徽标中的圆圈，页面将重定向到 tutorialspoint 主页，如果您单击 “tutorials” （矩形区域地图），将重定向到我们的教程库。
On executing the above example, a page with Tutorialspoint logo will be displayed. If you click on the circle in the logo, the page will be redirected to the homepage of tutorialspoint and, if you click on “tutorials” (rectangular area map) you will be redirected to our tutorials library.
您可以添加更多 ‘<area>’ 元素来在图像上创建不同的可单击区域，根据您的要求将它们连接到不同的 URL 或操作。这为您的网站访问者提供了一种互动体验。
You can add more ‘<area>’ elements to create different clickable regions on the image, connecting them to different URLs or actions per your requirements. This provides an interactive experience for your website visitors.