数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中定义图像映射中的区域？
使用 <area> 标签在 HTML 中定义图像映射中的区域。
HTML <area> 标签支持以下附加属性 -
| 属性 | 值 | 描述 |
|---|---|---|
| Alt | 文本 | 指定区域的替代文本。 |
| coords | 如果 shape = "rect" 则 coords = "left, top, right, bottom" | 指定与 shape 属性相对应的坐标，以定义图像映射中图像的区域。 |
下载  | 文件名 | 指定当用户单击超链接时目标将被下载。 |
| Href | URL | 指定链接指向的页面的 URL 或锚点的名称。 |
hreflang  | 语言代码 | 指定目标 URL 的语言。 |
media  | 媒体查询 | 指定目标 URL 针对其优化的媒体/设备。 |
| Nohref | true/false | 从图像映射中排除区域 |
rel  | 替代 作者 书签 帮助 许可证 下一个 nofollow noreferrer 预取 上一个 搜索 标签 | 指定当前文档与目标 URL 之间的关系 |
| Shape | rect 矩形 circ 圆形 | 指定图像映射的形状 |
| poly 多边形 | ||
| Target | _blank _parent _self _top | 在何处打开目标 URL。 _blank - 目标 URL 将在新窗口中打开 _self - 目标 URL 将在其被点击的同一框架中打开 _parent - 目标 URL 将在父框架集中打开 _top - 目标 URL 将在窗口的整个主体中打开 |
type  | mime_type | 指定目标 URL 的 MIME（多用途互联网邮件扩展）类型。 |
示例
您可以尝试运行以下代码来实现 <area> 标签 -
<!DOCTYPE html> <html> <head> <title>HTML area Tag</title> </head> <body> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" /> </map> </body> </html>
更新于：2020-03-03
432 次浏览
广告