zzxiong
什么是图像地图

把一幅图像分成多个区域,每个区域指向不同的URL地址,比如,将一幅中国地图的图像按省市划分成若干区域,这些区域被称为热点,单击热点区域,就可以链接到与相应省市有关的页面,这就是图像地图.

3:怎样产生图像地图?

(1) 首先必须定义出图像上的各个热点区域的形状,位置坐标,及其指向地url地址等信息,这个过程叫图像热点映射,图像热点映射需要使用<mapname=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称.
(2) 图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shqpe="形状" coords="坐标" href="url">.href部分也可以用nohref替换,表示在该区域单击鼠标无效.<area>标签还可以有一格Target属性,用来指明浏览器在那个窗口或贞中显示href属性所指向的网页资源.

(3)在定义好了图像热点映射后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,usmap属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,格式为:在<map>标签的<name>属性设置值前多加一个#字符.例如:
<img src="china.jpg" usemap="#mymap">

-------------------------------------

例子:


定义图像地图的过程:

<!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图) "#mymap"(所使用的图像热点映射名称)-->
<img src="logo.gif" border=0 usemap="#mymap">
<!--定义热点映射--->
<map name=mymap>
<!---定义第一个热点区域---->
<!--shape(定义热点区域形状) "rect"(矩形) coords(设定坐标) "0,0,(矩形左上角位置坐标)50,50,"(右下角位置坐标) href(设定超链接指向) "a.html"(超链接指向值)-->
<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>

----------------------
图像地图热点区域形状(shape)举例:


<img src="logo.gif" border=0 usemap="#mymap">

<map name=mymap>


<area shape="rect" coords="140,20,280,60" href="a.html">

<area shape="poly" coords="100,100,180,180,200,140" href="b.html">

<area shape="circie" coords="80,100,60" href="c.html">

</map>

shqpe属性的设置说明:

rect 定义一个矩形区域,coords属性设置值为矩形的左上角,右下角的坐标,各个坐标值之间用逗号分开;

poly 定义一个多边形区域, coords属性设置值为多边形各项顶点的坐标值;

circle 定义一格圆形区域, coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.

分类:

技术点:

相关文章:

  • 2021-05-02
  • 2021-10-12
  • 2021-10-24
  • 2022-12-23
  • 2021-04-16
  • 2021-09-03
  • 2022-12-23
猜你喜欢
  • 2021-09-09
  • 2022-01-09
  • 2022-12-23
  • 2022-12-23
  • 2021-10-29
  • 2022-12-23
  • 2021-11-03
相关资源
相似解决方案