所谓图像热点区域,就是指一个图像中的某一区域,那么热点图像区域的链接,自然就是使用这个区域作为超链接,就好像在一张地图上,以其中某一区域作为超链接。所以,在代码中也用到一个形象的标签--<map>标签。<map>标签下,嵌入使用<area>标签表明某一区域,其中有3个属性值来确定这个区域,分别是shape属性、coords属性和href属性。
shape属性:用来确定选区的形状,分别是rect(矩形)、circle(圆形)和poly(多边形)。
coords属性:用来控制形状的位置,通过坐标来找到这个位置。一般来说,在实际操作中,设计者都会选择借助可视化的编辑页面的软件来实现这一功能,这就省却了花费很多心思在图像上测算具体的坐标值。
href属性:就是超链接。
所以,将这些属性运用在一起,这种方法的具体代码如下:
- <map id=…>
-
<area shape="…" coords="…" href="…">
-
</map>
这里介绍一种借助Dreamweaver软件来制作热点图像链接的实例。Dreamweaver的工作界面如图6.13所示。
|
图6.13 Dreamweaver中制作热点区域 |
在Dreamweaver标准工作界面中,上部分是代码区,可以在这里写代码,中间是预览页面的地方,最下面是修改一些属性值的面板,右侧是一系列不同的工作面板。在这里并不需要使用到。当使用代码在页面中置入图像以后,在图6.13中的左下角单击线框中的图形按钮,Dreamweaver中便直观地表示了不同形状热点区域的图标。选中后,在预览页面区域中的图像上绘制需要的形状并放置在需要的位置。设置好以后,代码区域会自动生成<map>标签,这里要修改两个属性。这时在代码区域中可以看到如下代码:
- 01<img src=图片/向左向右.jpg / usemap="#Map">
-
02 <map id="Map">
-
03 <area shape="circle" coords="303,265,86" href="#" />
-
04 </map>
在这个默认的代码中,第2行中id属性下为Map,这个名字可以自行去定义。注意在第1行中,引用了这个命名为Map的热点区域链接。而在第3行的<area>标签中,shape和coords属性已经自动生成。在这个例子中,表示为圆形的选区,位置定义在"303,265"的坐标位置上,尾数86代表的是这个圆的半径值,这个数值控制圆面积的大小。完整的页面源码如程序6.12所示。
【本节示例参考:资料光盘\第6章\6-12 借助Dreamweaver软件来制作热点图像链接.html】
【实例6-12】借助Dreamweaver软件来制作热点图像链接,其源码展示如下:
程序6.12 借助Dreamweaver软件来制作热点图像链接.html
- 01 <html>
-
02 <head>
-
03 <title>借助Dreamweaver软件来制作热点图像链接</title>
-
04 </head>
-
05 <body>
-
06 <img src=图片/向左向右.jpg border="0" / usemap=#Map>
-
07 <map name="Map">
-
08 <area shape="circle" coords=
"305,266,43" href="后退.html" />
-
09 <area shape="rect" coords="
246,105,298,135" href="后退.html">
-
10 <area shape="rect" coords="
264,44,293,74" href="后退.html">
-
11 <area shape="rect" coords="
243,16,260,51" href="后退.html">
-
12 <area shape="rect" coords="
23,40,59,74" href="后退.html">
-
13 <area shape="rect" coords="
13,98,59,120" href="后退.html">
-
14 <area shape="rect" coords="
40,132,78,162" href="后退.html">
-
15 </map>
-
16 </body>
-
17 </html>
【运行程序】这个页面在浏览器中的结果如图6.14所示。
相关推荐
HTML给位图片上的指定区域(热点)添加超链接.zip
html5,js编写,对图片进行热点标注,可以任意区域进行标注,添加注释,最后可以一键保存成图片!!!
例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几个坐标: 然后代码实现: CSS Code复制内容到剪贴板 <!DOCTYPE html> <html lang=en> <head>
图片边框变换CSS Hover状态效果,代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”...
本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; [removed]=function(){ divId = document.getElementById(block1); var height1 = images1...
* 弹出图像,视频,Flash 在场景中的一些重要位置添加弹出图像,可以着重展示这块区域的效果。 * 性能增强 全景漫游者运用了更好的算法,可以支持诸如8000*4000及以上精度的图片,并且发布的虚拟漫游运行起来效果...
楼盘资讯:图文系统(地理位置图,实图片、户型展示) 楼盘点评:最新点评,热门点评(根据新房、二手房点评) 购房工具箱 (搜索工具) 2、二手房 出售信息:所有房源 中介房源 网络经纪人房源 个人房源;热点...
精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...
6.16 实例113:在按钮上显示图标 6.17 实例114:实现位图按钮 6.18 实例115:设置和获取单选按钮的选中状态 6.19 实例116:设置和获取一组单选按钮的选中状态 6.20 实例117:组合框的使用 6.21 实例118:实现带自动...
2.2 实例24:在系统菜单中添加和删除菜单项 2.3 实例25:禁用关闭按钮 2.4 实例26:启用和禁用菜单项 2.5 实例27:设置菜单项的检查状态 2.6 实例28:快捷菜单 2.7 实例29:获取光标的...
EXCEL必备工具箱:添加批注功能,为选定区域批量添加批注。(2021.5.4) EXCEL必备工具箱:统一杂乱数值功能,将五花八门诸如3.85万元,十万8千零二十,八万零二十 的杂乱数值转换成统一的数值格式,还可以用于大写金额...
精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...
精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...
精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...