在Web Page制作中，通过分割图象实现URL跳转有诸多不足。而HTML的扩展MAP机制可解决这些问题，如显示效果差、定位不精确、工作量大等。文中给出示例代码，介绍了关键语句和关键词，还说明了MAP机制的使用步骤。
Web Page中地图索引的制作
在实际
Web Page制作中，常常会遇到需要通过一整幅图象中的某些索引图标来产生URL跳转的情形。若不通过MAP机制，我们不得不把整幅图象分割成许多小块的独立图标图象，通过多个<IMG SRC=...>的语句来实现跳转。这种方法尽管可以满足部分的实际需要，但在某些特定的场合下，例如通过一整幅中国地图来直接点取各个城市来进行查询的情形，往往会显得力不从心：（
1）很难把各个分割后的矩形子地图在Netscape中合并显示成一幅完整“无缝”的图象，最终的地图的显示结果不理想；（
2）各个城市的定位不能精确到该城市在地图上“小圆圈”的相当精度；（
3）图象的切割和复杂的<IMG SRC=...>语句，使制作者的工作量加重。通过
HTML的扩展MAP机制，可以比较轻松解决上述问题，参照下面的例子：<HTML>
<HEAD>
<TITLE> A Sample for MAP </TITLE>
</HEAD>
<BODY Bgcolor=white>
<center>
<h1>Please select your choice.</h1>
<A HREF=""><IMG SRC="map.jpg" BORDER=0 USEMAP="#maintopmap" ISMAP ALT="Test MAP Function"></A><BR>
</center>
<MAP NAME="maintopmap">
<AREA COORDS="10,14,380,130" HREF="bycircle.htm">
<AREA COORDS="108,154,197,267" HREF="clock.htm">
<AREA COORDS="205,260,379,396" HREF="pig.htm">
</MAP>
</BODY>
</HTML>
在<A HREF=""><IMG SRC="map.jpg" BORDER=0 USEMAP="#maintopmap" ISMAP ALT="Test MAP Function"></A><BR>的语句中，有两个关键词要特别说明：
（
1）ISMAP表明此图象将用作为MAP。
（
2）USEMAP＝"#maintopmap"定义此地图的名字为maintopmap，前导＃号必需。
通过<IMG SRC=...>扩展语句定义了USEMAP名之后，随后即可使用此MAP在实现完整的地图索引跳转功能，使用下列语句：
<MAP NAME="maintopmap">
<AREA COORDS="10,14,380,130" HREF="bycircle.htm">
<AREA COORDS="108,154,197,267" HREF="clock.htm">
<AREA COORDS="205,260,379,396" HREF="pig.htm">
</MAP>
说明如下：
（
1）<MAP></MAP>为MAP标识词。（
2）< AREA COORDS="X1,Y1,X2,Y2" HREF=URL>，指出若用户选中了在地图图象中(X1,Y1)-(X2,Y2)的矩形区域内的索引标识，浏览器将Location定位到URL所说明的节点。MAP机制的使用步骤：
（
1）用图象软件制作出MAP图象；（
2）记录所有热点矩形区域的左上角(X1,X2)和右下角(X2,Y2)的座标值。X和Y座标值是相对的，图象的左上角的(X,Y)为座标原点(0,0)，右下角的(X,Y)=(图象宽度-1,图象高度-1);
（
3）在HTML文件中用<IMG SRC=...USEMAP=....ISMAP >语句定义地图；（
4）加入<MAP></MAP>语句，并填入其间的AREA COORDS=“X1,Y1,X2,Y2”的相对座标值及HREF URL节点名。
扫一扫
1515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
