您的位置:主页 > dede建站仿站 >

HTML Map图像地图制作

2015-08-22作者:伟伟来源:未知次阅读

     什么是图像地图?
    
    把一幅图像分成多个区域,每个区域指向不同的URL地址。例如,将一幅中国地图的图像按照省市划分为若干个区域,这些区域就被称为热点,单击热点区域,就可以连接到与相应的省市有关的页面,这就是图像地图。
    
    怎么制作?
    
    首先必须定义出图像上的各个热点区域的形状,位置坐标,及其指向的URL地址等信息,这个过程叫图像热点映射。图像热点映射需要使用<map name=mapname></map>标签对进行说明,其中的name属性为该图像热点映射指定了一个名称。
    
    图像热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href="URL">,href部分也可以用nohref替换,表示在该区域单击鼠标无效。<area>标签还可以有一个target属性,用来指明浏览器在哪个窗口或者帧中显示href属性所指向的网页资源。
    
    定义好了图像热点之后,接着就要在<img> 图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用作图像地图,其设置值为所使用的图像热点映射名称,格式为:在<map>标签中的name属性设置值前多加一个"#"字符。例如,<img src="china.jpg" usemap="#mymap">
    
    示例代码
    
    CODE:
    
    <img src="china.gif" usemap="#mymap">
    
    <map name="mymap">
    
    <area shape="rect" href="a.html" coords="0,0,50,50">
    
    <area shape="circle" href="b.html" coords="120,80,50">
    
    <area shape="poly" href="c.html" coords="0,0,50,50,100,100,200,200">
    
    </map>
HTML Map图像地图制作
    
    Shape属性的设置说明:
    
    Rect:
    
    定义一个矩形区域,coords属性设置值为左上角、右下角的坐标,各个坐标之间用逗号分开。
    
    Poly:
    
    定义一个多边型区域,coords属性设置值为多边形各个顶点的坐标值。
    
    Circle:
    
    定义一个圆形区域,coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横、纵坐标,第三个参数为半径。
    
 

          案例:

map图像地图制作Venus Mercury Sun

凡本站注明“本站”或“投稿”的所有文章,版权均属于伟伟SEO或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。本站已授权使用的作品,应在授权范围内使用,并注明“来源:伟伟SEO”并附上链接。违反上述声明者,本站将追究其相关法律责任。

编辑:深圳网站优化公司 关键词:

网友评论

博主推荐

图文聚集

热门排行

最新文章