表单元素之图形系
2016-10-30 14:44
92 查看
说起图形系,可能有人马上想到
不过,input[type=image]在提交时,会将提交时点击按钮的offset坐标也提交上去。
x 坐标将以控件名称后加 .x 提交,y 坐标将以空间名称后加 .y 提交
可能提交数据为aaa.x=99&aaa.y=109, value值会被忽略。这可以用判定是否真实用户提交。
言归正转,真实的图形系表单元素是指area与map元素。
这个整体叫做图片映射。map元素的name值等于usemap的值,当然usemap会多了一些东西。当我们点击img标签时,实标上点到浮在它上面的map元素上。map元素上也浮着更多area元素。通常我们的元素都是四四方方的,而这些area元素则可以是椭圆形,三角形,多边形。。。
下面列出了每种形状的适当值:
圆形:shape="circle",coords="x,y,z":这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,...":每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2":第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
更多用法可以见MDN官网
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/area
但是近十年来,随着SVG的崛起,他们俩功能重复,于是功能够弱的area,map元素就没落了。
相关链接
http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html
http://www.image-maps.com/
http://blog.csdn.net/shehun1/article/details/22324517
<input type="image">,可惜那是谬误,不要想当然,那是一个提交按钮。HTML有多少提交按钮,如不写type属性的button标签,type="submit"的input标签,还有type="image"的input标签。
不过,input[type=image]在提交时,会将提交时点击按钮的offset坐标也提交上去。
x 坐标将以控件名称后加 .x 提交,y 坐标将以空间名称后加 .y 提交
<input type="image" name="aaa" value="333">
可能提交数据为aaa.x=99&aaa.y=109, value值会被忽略。这可以用判定是否真实用户提交。
言归正转,真实的图形系表单元素是指area与map元素。
<img src="planets.gif" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" /> </map>
这个整体叫做图片映射。map元素的name值等于usemap的值,当然usemap会多了一些东西。当我们点击img标签时,实标上点到浮在它上面的map元素上。map元素上也浮着更多area元素。通常我们的元素都是四四方方的,而这些area元素则可以是椭圆形,三角形,多边形。。。
下面列出了每种形状的适当值:
圆形:shape="circle",coords="x,y,z":这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,...":每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形:shape="rectangle",coords="x1,y1,x2,y2":第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
更多用法可以见MDN官网
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/area
但是近十年来,随着SVG的崛起,他们俩功能重复,于是功能够弱的area,map元素就没落了。
相关链接
http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html
http://www.image-maps.com/
http://blog.csdn.net/shehun1/article/details/22324517
相关文章推荐
- html表单元素的colspan和rowspan
- js权威指南之表单和表单元素
- 表单元素
- javascript实现的动态添加表单元素input,button等(appendChild)
- WebForm 【简单控件】【表单元素】
- JQuery动态创建DOM、表单元素的实现代码
- JavaScript权威指南_140_第15章_脚本化文档_15.9-HTML表单-表单和元素的属性
- avalon ms-duplex表单元素数据双向绑定
- Python脚本控制的WebDriver 常用操作 <二十> 处理表单元素
- 表单元素与提示文字无法对齐的问题(input,checkbox文字对齐)
- 主题:Web自定义表单集成FusionCharts图形控件
- 表单元素遍历
- jQuery获取form表单元素的值
- 新增表单元素
- 表单Form以及表单元素,框架集(了解)及iframe(重点)
- jQuery对表单元素的取值和赋值操作
- 第二章 6 HTML5 表单元素
- JavaScript显示表单内元素数量的方法
- AngularJS使用指令增强标准表单元素功能
- HTML表单之input元素的23种type类型