在图片上添加热点区域 -

long2010

浏览: 56321 次
性别:
来自: 大连

最近访客更多访客>>

pppjiangpan

艾伦蓝

CHE墨心

lya041

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在图片上添加热点区域

热点区域

   图象地图分为: 客户端图象地图,服务器端图象地图.但是现在服务器端图象地图已经被前者给淘汰了.什么是图象地图?把一幅图象
分成多个区域,每个区域指向不同的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属性：就是超链接。

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


<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>