WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— 添加到WorldWideScripts.net

@zhcn1wws订阅我们的饲料,以保持最新

新!跟随我们,你想要它


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

这是一个HTML图像映射专为Web开发人员

该工具已经使用HTML5的画布,所以它的使用仅限于支持canvas浏览器,同时也是文件的API:

IE10 +,FF3.6 +,FF14-,FF18 +(该FF15有问题,有些画布功能,错误787623,将在FF18得到解决),Chrome6 +,Safari6 +,Opera11.1 +

由于这是开发人员的工具,我认为这不是一个很大的限制,因为我想,一个web开发人员没有问题,选择一个合适的浏览器。

我已经使用FF14开发工具,所以这是最好的choise,但该工具也已测试了Chrome22和Opera12


注意 您可以在实时预览链接来查看该工具的版本,是工具的有限版本。 在这个版本中,你只能加载一组特定的图像,在主页上列出。 加载图像后,你可以画出所有的形状,但只有前6形状将在HTML代码来生成。 这一限制并不妨碍你来测试工具的所有功能。


什么是影像地图?

图像映射是一个HTML代码,使用户可以点击不同的图像区域。 在HTML代码包含地图 HTML标记的,与地区的标签,这让您与矩形,多边形和圆形定义区域相结合。
举个例子,如果你有image1.png形象在你的HTML页面,你可以写下面的代码:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

正如你所看到的,你必须设置USEMAP属性的img标签 ,将在地图标记的 name属性的值相同。 在<图>和</图>之间,你可以根据需要定义尽可能多的<区>标签 ,每一个代表相关图像上的用户可点击区域。 每个区域都必须有一个形状属性 ,这可以具有3个值中的一个: 矩形多边形和圆形。 的矩形形状是由2点完全确定,因此聚形状由点的序列定义的和一个圆形状由一个点,它表示的中心,和一个半径限定。 所有的点由一对坐标定义的,表示在像素,亲戚的图像的左上角。 形状属性也可以具有“默认”值,即参考图像的未映射与前述任何形状的零件。 考虑到,相反,在其形状在图中定义的顺序是非常重要的:如果你定义的“默认”的形状,在地图中第一个形状,它将覆盖所有后续的形状,因为“默认”形状是指整个图像。 这是真实的也有相互重叠的形状:您可以定义一个小形成一个更大的形状,但你必须先确定小的形状,然后在更大的一个。 如果2形状共享图像的一部分,第一限定的形状,胜。

如果你想手动设置图像映射,你必须知道所有定义不同的形状所需要的点的坐标。 也许这不是,如果你有几个方面映射一个很大的问题,特别是如果你有圆形或矩形区域。 但是,如果你有几个方面,一个多边形,手动设置不是一个简单的任务。

图像映射工具允许您绘制图形,如矩形,保利,以及所选择的图像上 ,会自动在相应的HTML代码,使图像的用户可点击的区域进行翻译。

绘制形状给定的图像后,可以生成HTML代码,只需点击一个按钮,代码将在一个textarea来displayied。 您可以复制的HTML代码,并用它在你的HTML网页。 你也可以做相反的过程:粘贴在textarea的HTML代码,就可以加载这些代码,只需点击一个按钮; 这将被翻译在图像上的形状和可以修改它们,添加新的形状和重新生成的HTML代码。 这种反向的机制是非常有用的,让您保存部分映射过程,并继续到图像后映射。 这也是有益的改进“手动”的造型设计/定位:生成代码的文本区域后,你可以修改文本区域的坐标上飞,并重新加载它。

主要特点:

  • 您可以选择本地或远程图像
  • 您可以设置目标图像大小:这些尺寸的图像会在你的HTML页面
  • 可以在与在任何时刻,在图像放大,这将不会与将要产生的实际坐标,仅依赖图像的目标尺寸干扰。 缩放功能仅用于帮助您绘制图形。
  • 您可以设置几个参数,每个形状,如“href”属性,在“alt”属性,“标识”和“类”的属性和最后的“目标”属性。 要设置你必须选择形状参数:选择一个形状,你必须在工具栏中选择左上角的箭头,然后单击形状。
  • 您可以设置一些参数地图:地图上“名”,默认URL和目标。
  • 您可以绘制一个形状从工具栏中选择形状。
  • 要绘制形状,在工具栏中选择它后,你可以简单地用鼠标点击图像,你要开始的形状上。
  • 如果形状为圆形,该firts点为中心:移动鼠标(点击或释放),你可以看到光标跟随一个圆。 再次单击鼠标会停止绘制圆。
  • 如果形状是一个矩形。 第一点是所述角中的一个。 移动鼠标(点击或释放)将绘制一个矩形。 再次单击鼠标会停止绘制。
  • 如果形状是聚过程稍有不同:鼠标的每一次点击都会设置一个点; 当前点始终与冷杉1连接,使得聚总是闭合的形状; 停止绘制聚(设置最后一个点),您必须双击鼠标。
  • 对于所有的形状,你也可以停下来吸引他们点击“停止”按钮(工具栏的左上角的箭头)。
  • 你可以看到鼠标的坐标,当您在图像上移动。
  • 您可以使用灰色虚线边框的图像周围,以确定图像的边缘坐标,这样你就可以使用边框,因为它是图像的一部分:这样,可以在形状绘制过程中单击边框,强制,因为它是图像的一部分。 例如,如果你点击边框的左上角,您将设置一个点(0,0)坐标。 如果您点击左侧边界,在任何时候,您将设置一个点(0,y)坐标等。
  • 您可以选择一个已经绘制形状和修改/调整/删除它。 要删除它,你必须使用工具栏中的“橡皮”,即会出现一个掉头向下铅笔只能选择一个形状。
  • 您可以选择从一组5种颜色的形状轮廓的颜色(这不是一个设计工具,所以我有限的色数,你也不能选择不同的颜色为每个形状)。
  • 您可以点击“地图”按钮,只有当你选择工具栏上的“停止”按钮,并没有形状的选择是可见:如果你有一些形状绘制的图像上,你会看到HTML代码的文本区域,如果你还没有绘制的形状,你会看到一个空的textarea的,但你在它的一些HTML代码可以过去并加载它。
  • 点击“加载”按钮(即你只能点击“地图”按钮后见),存在于textarea的HTML代码将被翻译成形状的图像。

您可以咨询在下面的链接工具的完全手册: 使用手册

如果您有任何问题,只是发表评论或给我发电子邮件!


下载
此类别中的其他组成部分这个作者的所有组件
评论常见问题和答案

属性

创建:
10 10月12日

最后更新:
N / A

高分辨率:

兼容的浏览器:
火狐,歌剧,铬

包括的文件:
JS的JavaScript,HTML,CSS

软件版本:
HTML5

关键字

电子商务, 电子商务, 所有项目, 应用程序, 区域, 帆布, 圈, 协调, HTML5, 图像, 地图, 映射器, 聚, RECT, 形状, 目标, 工具, 放大