通过html<map>标签给图片加链接

简介: 前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html标签给图片加链接 shape 属性为 "rect",表示方形,该值规定矩形左上角坐标(798,298)和右下角的坐标(956,340)。

前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接

<img src="/images/hlj.jpg" border="0" usemap="#Map" alt="">
<map name="Map" id="Map"><area shape="rect" coords="798,298,956,340" href="/dot.html" />
</map>

shape 属性为 "rect",表示方形,该值规定矩形左上角坐标(798,298)和右下角的坐标(956,340)。

参考资料:

<area> 标签

http://www.w3school.com.cn/tags/tag_area.asp

http://www.w3school.com.cn/tags/att_area_coords.asp

方形和圆形案例http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

目录
相关文章
|
29天前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
42 19
|
3月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
109 49
|
3月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
66 1
利用html2canvas插件自定义生成名片信息并保存图片
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
86 5
|
3月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
3月前
|
JavaScript 前端开发
HTML 链接5
空链接是指在HTML中不指向任何实际资源的链接。常见设置方法包括:`href=&quot;#&quot;`(导航到页面顶部)、`href=&quot;javascript:void(0)&quot;`(阻止默认行为,不刷新页面)、`href=&quot;&quot;`(刷新当前页面)、`href=&quot;about:blank&quot;`(打开空白页面)和`role=&quot;button&quot;`(链接表现为按钮,无默认行为)。选择合适的方法取决于具体应用场景。注意:链接应始终包含正斜杠以避免不必要的HTTP请求。
|
4月前
|
前端开发
HTML 链接2
HTML 使用 `&lt;a&gt;` 标签创建超链接,链接可以是文字或图像,点击后可跳转至新文档或当前文档的特定部分。链接地址通过 `href` 属性指定。默认情况下,未访问的链接为蓝色带下划线,已访问的为紫色,点击时为红色。样式可通过 CSS 自定义。
|
4月前
|
JavaScript 前端开发
HTML 链接1
HTML 链接(Anchor)是网页间跳转的核心元素,通过 `&lt;a&gt;` 标签创建。链接用于导航至其他网页、文档、图像等资源,实现网页互联。基本语法为 `&lt;a href=&quot;URL&quot;&gt;链接文本&lt;/a&gt;`。例如:`&lt;a href=&quot;https://example.com&quot;&gt;本文本&lt;/a&gt;` 是一个指向万维网上页面的链接。
HTML 链接4
`id`属性用于在HTML文档中创建书签。书签在页面中不可见,但可以通过链接直接跳转到指定位置。例如,在页面内或从其他页面链接到带有`id=&quot;tips&quot;`的元素:`&lt;a href=&quot;#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;` 或 `&lt;a href=&quot;https://www.runoob.com/html/html-links.html#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;`。
|
4月前
HTML图片
【10月更文挑战第4天】HTML图片。
49 2

热门文章

最新文章