html5中图像元素
2016-05-28 19:11
393 查看
<html> <head> <meta charset="utf-8"/> <title>图片</title> </head> <body> <img src="http://b.hiphotos.baidu.com/image/pic/item/d009b3de9c82d15825ffd75c840a19d8bd3e42da.jpg" alt="互联网上的图片"/> <!--添加宽度和高度--> <img src="http://b.hiphotos.baidu.com/image/pic/item/d009b3de9c82d15825ffd75c840a19d8bd3e42da.jpg" width="300" height="400" alt="互联网图片"/> <!--使用图片映射的形式来定义图片,图片映射的作用是点击图片上的某个区域,可以跳转到另一个页面,map中可以包含多个area子元素,每个area可以映射到不同的区域--> <!--map中的name要与img中usemap对应,area中的shape可以是circle(圆形)、rect(矩形)、ploy(多边形) coords是作用的区域,其中circle的参数是(x,y,z),(x,y) 是它的圆心位置,z是它的半径;rect的参数是(x1,y1,x2,y2),其中(x1,y1)表示左上角坐标,(x2,y2)表示右下角坐标,ploy的参数多边形的每个顶点都会有一个参数, (x1,y1,x2,y2,x3,y3,x4,y4......)---> <map name="test" id="mapTest"> <area shape="circle" coords="57,55,25" href="http://b.hiphotos.baidu.com/image/pic/item/d009b3de9c82d15825ffd75c840a19d8bd3e42da.jpg" alt="互联网图片"/> </map> <img src="images/img.jpg" width="300" height="120" usemap="#test" /> </body> </html>
显示如下图:
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享