映射的意思是：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
通俗的说就是：假如在一幅中国题地图的网页上做映射，我们要实现的功能就是点击河北区域，网页要跳转到河北省政府的官网，点击浙江省区域跳转到浙江省政府的官网，即点击哪个省的区域就跳转到哪个省的网站，这就是用地图映射功能实现的。
例如如下代码（图中图片自己去替换，然后在本地进行测试即可）：
<html><body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
原图和点击其中一个小图后的效果如下：
如果用工具,比如DW,可以直接点击或拖拽出一个区域,坐标自动生成.如果用文本编辑器,可以借助Windows画板,用画板打开要做热区的图像,鼠标放在要定位的点上,如果是矩形热区,就是矩形的左上角,然后看状态栏中的坐标.之后再将鼠标移至矩形右下角,再记录状态栏中的坐标,如此这四个值就是热区的坐标了.你所举的例子是图像映射，下面这篇文章很清楚的说明了什么是图像映射，及其用法。对于你所说的coords="11,488,218,552"中的数字，其实是图像影射中需要绘制的图形的一些参数，比如例子中的rect是矩形，所以需要定义左上角和右下角的坐标。所以(11,488)是左上角坐标（218,552）是右下角坐标。
至于div标签中的代码，实际是定义了一个层，你可以参考一些，层定义的html教程。比如以下的链接
http://it.dgzx.net/zxkt/gaoyiji/2002-2003-2/others/UsingDreamweaver/html/17Layers2.html
使用图像映射
1 什么是图像映射
所谓图像映射是指在一幅图中定义若干个区域，每个区域中指定一个不同的超链接，当单击不同的区域时便可以跳转到相应的目标页面。
2 创建图像映射
2.1 定义映射区域
定义映射区域使用MAP标记符，在<MAP>和</MAP>之间添加映射区域。添加映射区域使用AREA标记符。该标记符具有三个基本属性：
href 标识出目标的URL
shape 说明映射区域的形状。取值可是：
rect 矩形
circle 圆形
poly 多边形
default 整个图像区域
coords 用于标识映射区域的边界。
2.1 对映射区域进行引用
标记了映射区域之后，就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
一个完整的图像映射语法如下：
<map name="mymap">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
</map>
<img src=image_URL usemap=#mymap>
注意：map标记符中，name属性的取值必须与img标记符中，usemap属性的取值相同，只是usemap属性的值前面多了一个# 。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）