html5 area实例
真实页面效果：就是一张图
html代码：
<!DOCTYPE HTML> <html> <style> body{ padding:0px; margin:0px; } </style> <body> <img src ="images/b.jpg" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap"> <area shape ="rect" coords ="10,10,200,300" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="300,200,200" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="500,240,200" href ="venus.htm" alt="Venus" /> <!--直线--> <area shape="poly " coords="100,240,200,100,100" href="venus.htm" alt="Venus"> <!--三角形--> <area shape="poly " coords="100,240,200,100,100,100" href="venus.htm" alt="Venus"> </map> </body> </html>
PS：
定义和用法
shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
详细解释：
shape 属性用于定义图像映射中对鼠标敏感的区域的形状：
- 圆形（circ 或 circle）
- 多边形（poly 或 polygon）
- 矩形（rect 或 rectangle）
1、圆形效果图：
2、长方形效果图：
3、直线效果图：
4、三角形效果图：
分类:
HTML5技术
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix