[发明专利]一种HTML图像上添加、显示标记的方法及装置

说明书

本发明公开了一种HTML图像上添加、显示标记的方法及装置，属于网页设计技术领域。方法包括：当浏览器打开HTML页面时，对应的JavaScript脚本被加载并获取HTML页面中图像的标记记录集合，当标记记录集合为空时，获取鼠标在图像上的点击位置并添加标记，生成标记记录并保存后，继续获取HTML页面中图像的标记记录集合；当标记记录集合为非空时，根据其中含有的标记记录显示对应的标记，并获取鼠标在图像上的点击位置，如为无标记处，则执行上述添加标记的操作；如为有标记处，则显示对应标记的详细信息或不做任何操作。本发明中，无需引入任何插件即可在HTML图像上添加有别于图像的标记，以及显示各不同的标记。

技术领域

本发明涉及网页设计技术领域，尤其涉及一种HTML图像上添加、显示标记的方法及装置。

背景技术

HTML(Hyper Text Markup Language，超文本标记语言)是标准通用标记语言下的一个应用，通过标记符号来标记要显示的网页中的各个部分，其包括<map>、<div>、<img>、<area>标签元素。

现有技术中，通常会有在网页或客户端已有的一幅图像上做标记的交互方式，简单的带有可点击区域的图像映射，可由HTML的标签元素——<map>、<area>来实现，即<area>标签元素嵌套在<map>标签元素内部，并在<area>标签元素中定义图像映射的区域。然而由于<area>标签元素只能定义可点击区域的形状和位置，而无法形成有别于图像的标记，因此用户在视觉上没有直观的表现，并且各<area>标签元素间也没有相互区分的直观辨识性，使得用户体验不友好。

发明内容

为解决现有技术的不足，本发明提供一种HTML图像上添加、显示标记的方法及装置。

一方面，本发明提供一种HTML图像上添加、显示标记的方法，当浏览器打开HTML页面时，对应的JavaScript脚本被加载并执行以下操作：

步骤S1：JavaScript脚本获取对应HTML页面中图像的标记记录集合，当所述标记记录集合为空时，获取鼠标在所述图像上的点击位置，执行步骤S2；当所述标记记录集合为非空时，执行步骤S3；

步骤S2：所述JavaScript脚本在获取的点击位置处添加标记，生成对应的标记记录并保存，返回步骤S1；

步骤S3：所述JavaScript脚本根据所述标记记录集合中含有的标记记录在所述图像中显示对应的标记；

步骤S4：所述JavaScript脚本获取鼠标在所述图像上的点击位置，如为无标记处，则返回步骤S2；如为有标记处，则显示对应标记的详细信息或者不做任何操作。

可选地所述步骤S1中，所述JavaScript脚本获取对应HTML页面中图像的标记记录集合，具体为：JavaScript脚本通过异步请求在服务器或者数据库中获取对应HTML页面中图像的标记记录集合；

对应地，所述步骤S2中，所述生成对应的标记记录并保存，具体为：JavaScript脚本生成对应的标记记录，并通过所述异步请求将生成的标记记录保存至所述服务器或者数据库中。

可选地，所述步骤S1之前，还包括：创建HTML文档对象模型，具体包括：

创建父容器，并设置所述父容器的显示样式；

创建所述父容器的第一子元素，并设置所述第一子元素的显示样式，所述第一子元素承载图像；