如何构建没有图像映射编辑器的图像映射

图像地图只是简单的HTML标签

图像地图是激活您的网站的一个令人兴奋和有趣的方式 - 通过它们，您可以上传图像，并将这些图像的一部分点击到其他在线资源上。如果您处于困境中，并且不想下载图像映射编辑器，则使用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标准仍支持地图标记，但使用外形小的移动设备可能会导致图像地图出现意外的性能问题。另外，带宽问题或破碎的图像会影响图像映射的值。

所以，随时可以继续使用这种稳定的，充分理解的技术 - 知道现在有更多的高效替代品可以与网页设计师一起使用。

Alike posts