如何创建客户端分区响应图
1. 什么叫做“客户端分区响应图”?
即在页面上的一张图片,我们手动将其分为若干个部分,并给这些部分中的若干个加上URL,使得当我们鼠标点击其中的某一个部分时,浏览器可以跳转到其URL对应的页面。
说完了我对“客户端分区响应图”的理解,那么如何制作呢,首先,我们需要用的原料有“一张图片”,需要用的的工具有map元素和area元素。
area元素中需要用到三个属性,分别是href属性,shape属性和coords属性。它们的用处如下:
- href:要链接到的URL地址
- shape:形状。也就是可导航区域的形状,可选的值有rect(矩形),circle(圆形),poly(多边形),default(覆盖整张图片)。
- coords:这个值的个数和你选择的shape有关,矩形需要四个值(分别是矩形的四条边和图像的四个边缘的距离),圆形需要三个值(分别是图像的左边缘和上边缘到圆心的距离以及圆的半径),多边形则至少需要六个用逗号隔开的整数,每一对数字各代表多边形的一个顶点。default则默认为整张图片,不需要给coords赋值。
为了更加直观的感受,我以一个矩形为例演示一下:
如图所示,图中的数据都是我编的,我们假设蓝色就是一张图片,两个黄色块就是手动划出来的两个区域,当我们用鼠标点击两个黄色块中的任意一个时,会跳转到对应的URL地址。现在示意图有了,我们就可以根据示意图编写对应的HTML代码了:
1 <p> 2 <img src="blue.png" usemap="#myMap" alt="Blue Map"/> 3 </p> 4 <map name="myMap"> 5 <area href="area1.html" shape="rect" coords="5,8,30,32" alt="area1" /> 6 <area href="area2.html" shape="rect" coords="34,8,50,32" alt="area2" /> 7 <area href="other.html" shape="default" alt="default"/> 8 </map>
其中,area1.html就代表第一个黄色块,area2.html代表第二个黄色块,而other.html则代表蓝色块除了两个黄色块的其他区域。