本文转自:http://www.nowamagic.net/html/html_MapArea.php
标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下: view sourceprint? 1 shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下: 表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。 表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。 表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。 标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 标记划分区域前必须用HTML的另一个标记来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即 ...... 。 下面通过一个例子来说明这两个标记的用法: 这里是一幅新书架的图片,要做的效果是:当鼠标点"网址大全"这本书时,新开一窗口,显示关于这本书的简介及订单的网页(urlall.htm);当 鼠标点"网站设计攻略"这本书时,新开一窗口,显示关于这本书的简介及订单的网页(siteall.htm);当鼠标点"网页技巧大全"这本书时,新开一 窗口,显示关于这本书的简介及订单的网页(pagejqlall.htm)。制作方法: 插入图片,并设置好图像的有关参数,且在标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用; 用标记设定图像地图的作用区域,并取名为:newbook; 分别用
标记针对三本书的位置划分出三个矩形作用区域,并设定好其链接参数href。
1 <img src="image/htmlp3.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0"> 2 <map name="newbook"> 3 <area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。"> 4 <area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。"> 5 <area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。"> 6 </map>
1 <map name="map"> 2 <area shape="rect" coords="75,75,99,99" nohref="nohref"> 3 <area shape="circ" coords="50,50,25" nohref="nohref"> 4 </map>
注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。在制作本文介绍的效果时应注意的几点: 在
相关推荐
vue实现在图片中画矩形框(JS图片画方块定位坐标),并得到对角坐标,并拿到对应坐标制作图片热区并设置map中area的样式(图片热区map area的用法)
可以在html绘制矩形、圆形、图片等形状,形成热区坐标。
图片热区,自由编辑页面模型和自定义链接,只要用idea直接就可以用浏览器打开,注释应有尽有
jquery设置图片热区并生成图片
js 动态获取图片上的矩形热区,可随意选择区域。鼠标经过该区域时,会出现一半透明蒙版,显示该区域的位置大小。点击可超链接。创建的热区可修改链接,也可以动态删除热区
CSS自定义图片热区示例代码,直接在HTML里,查看代码
1、可添加多个热区, 2、可拖动热区位置及大小, 3、可为每个热区添加连接
js 动态设置图片的热区并获取图片坐标 浏览器 均兼容 你懂的
热区应用的例子 在图片上设置热区,点击图片上的点,执行javascript方法
Axure7.0 教程部件详解图片热区 hot spot AxureRP7.0 是一个功能强大且流行的交互设计和原型设计工具,它提供了许多实用的部件和功能,帮助设计师快速创建高质量的交互原型。其中,图片热区(Hot Spot)是 AxureRP...
可以自定义在图片上增加热区,可标记多个,结合cookie插件保存
imagemap-generator网上找的image map生成热区工具,放到本地方便访问出处:使用方法将本项目克隆到本地,浏览器打开index.html或者直接访问在输入框输入图片地址或者拖拽本地图片到输入框等待图片加载后,鼠标移入...
模拟图片热区功能,利用.png定位在大图上,鼠标经过平面图有凸效果,可点击;可随网页大小缩放,
使fckeditor具备图片热区的功能,本部分是测试demo,还未包含插件,随后上传
用Delphi实现热点(图片部分设为热区)
view.aspx 加载图片和图片热区 orderPoint.aspx 设置图片热区 PS: 热区仅支持不规则多边形 此版本为简易开发版,但功能齐全. 支持图片缩放,热区自动根据图片缩放进行缩放. 第一次上传自主产品,请支持!
可以在页面上用鼠标随便点击 获取两个坐标、并自动创建热区、点击可以为此选取添加颜色、调至透明度
NULL 博文链接:https://yq135314.iteye.com/blog/1997676
【vue3 + ts】支持图片缩放预览和图片热区点击功能
用frontpage为图片插入热区,应该注意的事项,为什么在淘宝后台中不能用热区。