IT兄弟连 HTML5教程 多媒体应用 HTML图像地图

4df1a4b602d44f5284258665493a851e.jpg

 

图像地图是带有可点击区域的图像,通常情况下,每个区域是一个相关的超级链接。点击某个区域,就会到达相关的链接,也可以通过图像地图实现图片切换效果。

 

1  什么是图像地图

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

 

2  怎么制作

1.首先必须定义出图像上的各个热点区域的形状,位置坐标,及指向的URL地址等信息,这个过程叫做图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。

2.图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape=”形状”cords=”坐标”href=”URL”>,href部分也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。<area>标签的属性及描述如表1所示。

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

表1  <area>标签的属性及描述

 

977223fa45f54356b753f61e7badd992.png

 

3  实现图像地图

我们为下面的“itxdl.png”图片划分一个地图,利用<img>标签的usemap属性设定图片热点,为图片划分四个区域(左上,右上,左下,右下),然后给热点设定相应的链接。代码如下:

 c130b8d551b64e92aaf4f8fc89c6a21d.png

 

将上包含上述代码的html文件在浏览器中打开,鼠标移入到图像地图的左上角区域,会在浏览器的左下角位置显示该区域的URL地址“www.itxdl.cn/topleft.html”,点击该区域跳转到该链接。效果如图3所示:

76c4059e31724f188782a48addd20117.jpg

图3  图像地图展示

上述代码表明,我们为”itxdl.png”链接了一个被平分为四个矩形区域的图像热点。上图只是第一区块的展示,同理,第二个区块在图像的右上角,第三区块在图像的左下角,第四区块在图像的右下角。除了为图像热点设为矩形之外,我们也可以将它们设为圆形或多边形,但是每种形状的坐标设定不相同。shape属性的设置说明如表2所示:

表2  shape属性的设置说明

 

fa8f9cf08a954d0aae8aa901d81ddc5d.png

posted on 2019-10-09 09:02  老码农的一亩三分地  阅读(...)  评论(...编辑  收藏

导航