图像地图是一种激动人心且有趣的方式来活跃您的网站 - 通过它们,您可以上传图像并使这些图像的一部分可以点击其他在线资产。如果您处于紧要关头并且不想下载图像映射编辑器,则使用HTML标记创建地图非常简单。
你需要一个图像,一个图像编辑器和某种HTML编辑器或文本编辑器。大多数图像编辑器会在您指向图像时显示鼠标的坐标。这个坐标数据是您开始使用图像映射所需的全部内容。
创建图像映射
要创建图像映射,首先选择将用作地图基础的图像。图像应该是“正常大小” - 也就是说,您不应该使用如此大的图像以使浏览器对其进行缩放。
插入图像时,您将添加一个标识地图坐标的额外属性:
创建图像映射时,您正在创建可在图像上单击的区域,因此地图的坐标必须与所选图像的高度和宽度对齐。地图支持三种不同类型的形状:
- 矩形 - 矩形或四边形
- 多边形或多边形图形
- 圈 - 圆圈
要创建区域,必须隔离要映射的特定坐标。地图可以包含图像上的一个或多个定义区域,单击该区域时,打开新的超链接。
为一个 长方形 ,您只映射左上角和右下角。所有坐标都列为x,y(上,上)。因此,对于左上角0,0和右下角10,15,您可以键入 0,0,10,15。然后将其包含在地图中:
为一个 多边形 ,你映射每个 X,Y 单独协调。 Web浏览器自动将最后一组坐标与第一组坐标连接起来;这些坐标内的任何内容都是地图的一部分。
圈 形状只需要两个坐标,如矩形,但对于第二个坐标,您可以指定半径或距圆心的距离。因此,对于中心位于122,122且半径为5的圆,您将写入122,122,5:
所有区域和形状都可以包含在同一个地图标记中:
注意事项
在20世纪90年代的Web 1.0时代到21世纪初期,图像地图更为常见 - 图像地图常常形成网站导航的基础。设计师会创建某种图片来指示菜单项,然后设置地图。
现代方法鼓励响应式设计并使用级联样式表来控制页面上图像和超链接的放置。
虽然HTML标准仍支持地图标记,但使用外形小巧的移动设备可能会导致图像映射出现意外性能问题。此外,带宽问题或损坏的图像使图像映射的值变得无用。
所以,随意使用这种稳定,易于理解的技术 - 知道目前有更有效的替代品 时尚 与网页设计师。