当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > Lesson01_08 图像地图

CSS样式表
CSS网页设计 IE8和IE7共存
CSS2 打印属性让打印HTML文档不出问题
制作网页中设计段落缩进的方法
CSS border 属性使用说明
CSS border-style 属性使用方法
CSS border-color 属性使用方法
CSS border-width 属性使用教程
CSS padding属性定义边内补白
CSS margin 属性定义边外补白
网页布局教程 掌握CSS网页布局属性
css 背景样式属性说明
span margin 设置生效
html 滚动条在IE6和IE7中兼容性问题
IE6 两个div有间隙的问题(IE 3px bug)
CSS 数字和字母将容器撑大问题解决
换个角度看页面重构中的语义化
DIY属于个人开发使用的CSS Reset
CSS 空格引起网页布局间距问题
CSS 网页制作时遇到问题的快速参考技巧
css li 去掉点的样式写法

CSS样式表 中的 Lesson01_08 图像地图


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 114 ::
收藏到网摘: n/a

1、图像超链接:
格式为:<a href="url"><img src="url"></a>

2、图像地图是什么?
把一个图分成多个区域,每个区域指向不同的URL地址

3、怎样产生图像地图
(1)先要定义出图像的各热点区域的形状、位置坐标、及其指向的url地址信息,这个过程叫做图像热点映射。
这个过程要用<map name=mapname></map>标签对进行说明,其中的name属性为这个热点映射指定了一个名称。
(2)图像热点中映射中的各个区域用<area>标签说明,<area>标签的格式为:
<area shape="形状" coords="坐标" href="URL">HREF部分也可以用nohref表示,表示在这个区域单击无效。 (3)定义好了后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,如下:
<img src="url" usemap="#mapname">

例:代码如下:
<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="/upload/tech/20091012/20091012140713_621bf66ddb7c962aa0d22ac97d69b793.gif" usemap="#mymap">
效果如下:

shape属性的设置说明:

  • rect定义一个矩形区域,coords属性设置为矩形的左上角,右下角的坐标,各个坐标值用,号分开;
  • poly定义一个多边形的区域,coords属性设置值为多边形各顶点的坐标值;
  • cicle定义一个圆形区域,coords属性设置值为圆形坐标及半径,前两个为坐标,后一个为半径。

    例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: