HTML之六:图像的热区连接
原创
©著作权归作者所有:来自51CTO博客作者Diesel的原创作品,请联系作者获取转载授权,否则将追究法律责任
HTML之六:图像的热区连接。
前面说了一下图像的插入,这次说说设置一张图片上不同地区的链接。比如一张地图上,河北,山东两省,点击河北的覆盖区域,转到一张河北的大地图,点击山东的覆盖区域,转到一张山东的大地图。这里我们就要用Dreamweaver找到它的坐标(coods)当然我们要首先插入中国地理图片。(还记得吗?嘿嘿。)并且使用usemap命名:
<img src=”” usemap=”映射图像名称”>
示例如下:
<img src=”ChinaMap.jgp” usemap=” ChinaMap”
然后再定义河北、山东这两个热区以及热区的属性:
<map name=” 映射图像名称”>
<area shape=”热区形状” coods=”热区图标” href=”链接地址” titile=”指向时显示文字”>
<area shape=” 热区形状” coods=” 热区图标” href=” 链接地址” titile=” 指向时显示文字”>
</map>
这样我们就定义了热区以及链接。img里的usemap和map里name定义的名字是一样的,但是img里的usemap的名字前加“#”,shape三个属性:circle(圆形),poly(多边形),rect(矩形),coods的属性就是坐标,如果你选定的区域是矩形,那么坐标就是对角线两个点的坐标,先写横坐标,再写竖坐标。圆形就是圆心坐标和半径长度。多边形每个点的坐标都要写上。
示例如下:
<img src=”” usemap=”#中国地理图片”>
<map name=” 中国地理图片”>
<area shape=”rect” coods=”"523,217,977,707"” href=”HB.jpg” titile=”显示河北大地图”>
<area shape=” rect” coods=”1048,390,1214,617” href=” SD.jpg” titile=” 显示山东大地图”>
</map>
这样我们点击中国地图上河北、山东的覆盖区域就会转到相应大图页面。当然实际中设置的是多边形区域,这里拿矩形做示例,希望还是会举一反三那。
上一篇:HTML之五:插入图片与超链
下一篇:HTML之七:表格。
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
安卓之热修复的原理以及解决方案
在当今快速迭代的应用开发环境中,热修复技术(Hot Fix)成为了一个重要的工具。特别是在Android平台上,热修复提供了一种在运行时修复应用程序缺陷的方法,而无需重新发布应用程序。本文将深入探讨安卓热修复的原理、解决方案、优缺点以及适用场景。
热修复 Android Tinker AndFix Dexposed -
python3+ldap3 连接控制windows域控(六)--删除
python ldap3 删除操作
bc Server 删除操作 -
HTML图片热区map area的用法
标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又
html 属性设置 超链接 -
css image 热区
热区 就是你指定图片的一个区域
css image 热区 html 自定义 -
查询简介(六)之连接查询
查询简介(六)之连接查询
查询简介(六)之连接查询