HTML5 之给图片添加热点

一、效果图

 

 二、代码

<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img src="https://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets"/>

<map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/example/html/venus.html" target="_blank" alt="Venus"/>
    <area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/example/html/mercur.html" target="_blank" alt="Mercury"/>
    <area shape="rect" coords="0,0,110,260" href="https://img.boyuan.com/videos/4/2021/07/W8083dAFcfq3D1QZQ30Paz0llMA3Lv.mp4" target="_blank"  alt="Sun"/>
</map>

</body>
</html>

 

posted @ 2022-02-09 14:35  样子2018  阅读(327)  评论(0)  编辑  收藏  举报