`
long2010
  • 浏览: 55353 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

在图片上添加热点区域

阅读更多

   图象地图分为: 客户端图象地图,服务器端图象地图.但是现在服务器端图象地图已经被前者给淘汰了.什么是图象地图?把一幅图象
分成多个区域,每个区域指向不同的URL.例如:把一幅中国地图的图象按照省份划成若干区域,这些区域被称为热点区域,点击热点区域就
可以链接到相关的地方,这就是图象地图.
   知道了概念,那怎么样产生图象地图呢?
1> 必须定义出图象上个热点区域的形状,位置坐标,及指向的URL地址信息,这个过程叫图象热点映射.图象热点映射需要使用<map nam
   e=mapname></map>标签进行说明.其中name属性为该图象热点映射指定了一个名称.
2> 图象热点映射中的各个区域用<are>标签说明,<area>标签的格式为: <area sharp="形状" coords="坐标" href=url>,也可以
   nohref替换href,表示该区域单击鼠标无效.<area>标签还可以有个target属性,用来指名浏览器哪个窗口或侦中显示href属性所
   指向的资源.
3> 定义好图象热点后,接着就要在<img>图象标签中增加一个名为usemap的属性设置,usemap属性指定该图形被用做图象地图,其设置
   值为所使用的图象热点名称.
eg:
<img src="logo.gif" border="0" usemap="#mymap">
<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="a.html">
<area shape="rect" coords="50,0,100,50" href="b.html">
<area shape="rect" coords="100,0,150,50" href="c.html">
</map>
sharp属性的设置说明:
.rect 定义一个矩形区域,coords属性设置为矩形的左上角,右下角的坐标,各个坐标之间用逗号隔开.
.poly 定义一个多边形区域,coords属性设置为多边形个顶点的坐标值.
.circle 定义了一个圆形区域,coords属性设置为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.
eg:
<map name="mymap">
<area sharp="rect" href="a.html" coords="140,20,280,60">
<area sharp="poly" href="b.html" coords="80,100,60">
<area sharp="circle" href="c.html" coords="100,100,180,80,200,140">
</map>
摘自:http://www.blogjava.net/DuYang/articles/45270.html

 

 

 

 

6.3.3  热点图像区域的链接

所谓图像热点区域,就是指一个图像中的某一区域,那么热点图像区域的链接,自然就是使用这个区域作为超链接,就好像在一张地图上,以其中某一区域作为超链接。所以,在代码中也用到一个形象的标签--<map>标签。<map>标签下,嵌入使用<area>标签表明某一区域,其中有3个属性值来确定这个区域,分别是shape属性、coords属性和href属性。

shape属性:用来确定选区的形状,分别是rect(矩形)、circle(圆形)和poly(多边形)。

coords属性:用来控制形状的位置,通过坐标来找到这个位置。一般来说,在实际操作中,设计者都会选择借助可视化的编辑页面的软件来实现这一功能,这就省却了花费很多心思在图像上测算具体的坐标值。

href属性:就是超链接。

所以,将这些属性运用在一起,这种方法的具体代码如下:

  1. <map id=…> 
  2.     <area shape="…" coords="…" href="…"> 
  3. </map> 

这里介绍一种借助Dreamweaver软件来制作热点图像链接的实例。Dreamweaver的工作界面如图6.13所示。

 
图6.13  Dreamweaver中制作热点区域
在Dreamweaver标准工作界面中,上部分是代码区,可以在这里写代码,中间是预览页面的地方,最下面是修改一些属性值的面板,右侧是一系列不同的工作面板。在这里并不需要使用到。当使用代码在页面中置入图像以后,在图6.13中的左下角单击线框中的图形按钮,Dreamweaver中便直观地表示了不同形状热点区域的图标。选中后,在预览页面区域中的图像上绘制需要的形状并放置在需要的位置。设置好以后,代码区域会自动生成<map>标签,这里要修改两个属性。这时在代码区域中可以看到如下代码:
  1. 01<img src=图片/向左向右.jpg / usemap="#Map"> 
  2. 02  <map id="Map"> 
  3. 03    <area shape="circle" coords="303,265,86" href="#" /> 
  4. 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

  1. 01      <html> 
  2. 02        <head> 
  3. 03          <title>借助Dreamweaver软件来制作热点图像链接</title> 
  4. 04        </head> 
  5. 05        <body> 
  6. 06       <img src=图片/向左向右.jpg border="0" / usemap=#Map> 
  7. 07        <map name="Map"> 
  8. 08           <area shape="circle" coords= "305,266,43" href="后退.html" /> 
  9. 09           <area shape="rect" coords=" 246,105,298,135" href="后退.html"> 
  10. 10           <area shape="rect" coords=" 264,44,293,74" href="后退.html"> 
  11. 11           <area shape="rect" coords=" 243,16,260,51" href="后退.html"> 
  12. 12           <area shape="rect" coords=" 23,40,59,74" href="后退.html"> 
  13. 13           <area shape="rect" coords=" 13,98,59,120" href="后退.html"> 
  14. 14           <area shape="rect" coords=" 40,132,78,162" href="后退.html"> 
  15. 15          </map> 
  16. 16        </body> 
  17. 17      </html> 

【运行程序】这个页面在浏览器中的结果如图6.14所示。

 

摘自:http://book.51cto.com/art/201002/182033.htm

分享到:
评论

相关推荐

    HTML给位图片上的指定区域(热点)添加超链接.zip

    HTML给位图片上的指定区域(热点)添加超链接.zip

    htmll5,js热点标注,添加注释

    html5,js编写,对图片进行热点标注,可以任意区域进行标注,添加注释,最后可以一键保存成图片!!!

    用CSS中的map标签制作单图多区域点击的示例

    例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几个坐标: 然后代码实现: CSS Code复制内容到剪贴板 &lt;!DOCTYPE html&gt;   &lt;html lang=en&gt; &lt;head&gt;

    鼠标指向网页图片时图片周围显示虚线框

    图片边框变换CSS Hover状态效果,代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt; &lt;html xmlns=”...

    JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; [removed]=function(){ divId = document.getElementById(block1); var height1 = images1...

    八倍全景漫游者(flash三维虚拟漫游制作软件) v2.7 官方中文免费版

    * 弹出图像,视频,Flash 在场景中的一些重要位置添加弹出图像,可以着重展示这块区域的效果。  * 性能增强 全景漫游者运用了更好的算法,可以支持诸如8000*4000及以上精度的图片,并且发布的虚拟漫游运行起来效果...

    易想房产网YxHouse v2.1 (金色大气版).rar

    楼盘资讯:图文系统(地理位置图,实图片、户型展示) 楼盘点评:最新点评,热门点评(根据新房、二手房点评) 购房工具箱 (搜索工具) 2、二手房 出售信息:所有房源 中介房源 网络经纪人房源 个人房源;热点...

    C#程序开发范例宝典(第2版).part13

    精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...

    VISUAL C++实效编程280例

    6.16 实例113:在按钮上显示图标 6.17 实例114:实现位图按钮 6.18 实例115:设置和获取单选按钮的选中状态 6.19 实例116:设置和获取一组单选按钮的选中状态 6.20 实例117:组合框的使用 6.21 实例118:实现带自动...

    《精通Visual C++实效编程280例》光盘源代码

     2.2 实例24:在系统菜单中添加和删除菜单项   2.3 实例25:禁用关闭按钮   2.4 实例26:启用和禁用菜单项   2.5 实例27:设置菜单项的检查状态   2.6 实例28:快捷菜单   2.7 实例29:获取光标的...

    EXCEL必备工具箱EXCELtool.rar

    EXCEL必备工具箱:添加批注功能,为选定区域批量添加批注。(2021.5.4) EXCEL必备工具箱:统一杂乱数值功能,将五花八门诸如3.85万元,十万8千零二十,八万零二十 的杂乱数值转换成统一的数值格式,还可以用于大写金额...

    C#程序开发范例宝典(第2版).part02

    精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...

    C#程序开发范例宝典(第2版).part08

    精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...

    C#程序开发范例宝典(第2版).part12

    精选570个典型范例,全面覆盖实用和热点技术,涉及面广,实用性强源于实际项目开发,帮助读者短时间掌握更多实用技术,提高编程水平范例经过精心编排,重点、难点突出,易学易懂书后附录提供快速索引,即查、即学、...

Global site tag (gtag.js) - Google Analytics