search

Home  >  Article  >  Web Front-end  >  How to use html map tag

How to use html map tag

青灯夜游
青灯夜游Original
2019-05-27 13:15:124158browse

html map tag is used for client-side image mapping. An image map is an image with clickable areas. Because the usemap attribute in How to use html map tag can reference the id or name attribute in (depending on the browser), we should add both the id and name attributes to .

How to use html map tag

#html How to use map tag?

Function: Define a client image mapping.

Description: Image-map refers to an image with a clickable area.

Note: area elements are always nested inside map elements. The area element defines an area in the image map. The usemap attribute in How to use html map tag can reference the id or name attribute in (depending on the browser), so we should add both the id and name attributes to .

html map tag example

<!DOCTYPE html>
<html>
<body>

<img
src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://www.php.cn/example/html/venus.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

Output:

How to use html map tag

The above is the detailed content of How to use html map tag. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use html ol tagNext article：How to use html ol tag

Related articles

See more