设计网站兼职赚钱,域名解析在线查询,上上上海网站设计,企业logo设计网站一 编写原因 应项目要求#xff0c;需要对图片的固定几个位置分别做一个点击事件#xff0c;响应不同的操作#xff0c;如下图#xff0c;需要点击红色区域#xff0c;弹出不同的提示框#xff1a; 二 获取点击图片时候的坐标
1. 说明 实现这以上功能的前提是需要确定需…一 编写原因 应项目要求需要对图片的固定几个位置分别做一个点击事件响应不同的操作如下图需要点击红色区域弹出不同的提示框 二 获取点击图片时候的坐标
1. 说明 实现这以上功能的前提是需要确定需要点击图片的区域坐标才能实现准确点击。如果不用工具或者代码获取坐标的话很难拿取到合适的位置。因此这里就先进行坐标的获取。
2. 获取步骤 1 创建一个html文件先利用img标签将图片展示在网页上一定要设置图片img的宽高这里的宽高一定要跟图片响应事件功能代码中的图片宽高一致切记切记很重要。。 2 在img标签中添加一个 ismap 属性这个属性值默认为true可以不用赋值。 3这个image外面包一层a 标签或者其他有href 属性的标签这个是必须的里面href中的链接可以不写也可以写。 区别是如果不写那么获取的坐标将会显示到当前html链接的后面如果写了那获取的坐标会发送到写了的href网页中。 因此我这里只想获取坐标所以我的href标签为空不用发送坐标到其他网页。 4 至此代码就写完了。运行代码展示html页面。如下图 5 如上图html展示了图片这里我们要获取A和B两个位置的坐标。 ① 获取A坐标将鼠标放到A上点击一次。可以发现当前页面的url后面有两个数字这就是当前鼠标点击的坐标所以A点的坐标为349。 ② 同样获取B点坐标鼠标点击B点可以发现B的坐标是10838 综上A和B的坐标就可以获取到了。这就是坐标获取方式。所以代码如下
!DOCTYPE html
html
body
h1获取鼠标点击图片时的坐标/h1
!-- 这里的href可以为空 --
a hrefimg styleborder: 1px solid red src./test.png width200 height400 ismap/a
/body
/html三 实现图片点击不同位置响应不同事件的功能 这个功能主要是利用html中的useMap属性和 area属性来实现的。步骤如下 1. 正常显示图片 这里使用到了img 标签设置图片路径、useMap属性以及图片的宽、高如果利用上面第二大点的方式获取坐标的话这个宽高一定要跟坐标获取界面的宽高一致切记切记这个demo中上面图片的宽高是200400因此这张图片宽高也是设置为200400。代码如下
img styleborder: 1px solid blueviolet src./test.png width200 height400useMap#setting 2.上面一步设置了useMap属性那么这一步就用来设置图片的点击区域这里就需要使用到map标签以及area标签。 1定义一个map标签定义name属性为“setting”这个setting必须是img标签中的useMap属性值。 2在map标签内容中写area标签并配置shape、coords属性以及onclick事件。 shape形状和coords坐标是配对使用的不同的shape配置不同的coords参数。如下所示 ① 当 shape为rect矩形区域那么coords格式为x1,y1,x2,y2x1y1和x2y2分别是矩形左上角和右下角坐标。 ② 当shape为 poly多边形区域那么coords格式为x1,y1,x2,y2,x3,y3,x4,y4,....,这些坐标分别是是多边形的顶点坐标。 ③ shape为circle圆形区域那么coords格式为x1y1rx1y1是圆心坐标r是半径。 3利用第二大点的方式获取需要的顶点坐标并配置到area属性中我这里已经获取出来了如下图 A点坐标 39,4; B点坐标 108,8。
C点坐标 72,290; D点坐标 35,307; E点坐标 72,322; F点坐标 110,306。
G点坐标 34,361; H点坐标 108,389。
配置代码如下 map namesetting }!-- 点击【开始】区域(整个开始方框框起来的地方)网页会弹出【开始】字样--area shaperect coords39,4,108,38 onclickalert(开始)/!-- 点击【满意】区域(整个开始方框框起来的地方)网页会弹出【满意】字样--area shapePoly coords72,290,35,307,72,322,110,306 onclickalert(满意)/!-- 点击【结束】区域(整个开始方框框起来的地方)网页会弹出【结束】字样--area shaperect coords34,361,108,389 onclickalert(结束)/
/map 4运行最终结果是点击【开始】方框网页弹出“开始”提示信息点击【满意】区域网页弹出【满意】提示信息点击【结束】方框网页弹出【结束】提示信息。结果如下图 备注因为这张图只涉及了长方形和菱形那么我们就用rect和poly设置circle就暂时用不到就不写了圆形也很简单知道圆心和半径即可。
四 总结
整个网页代码如下
!DOCTYPE html
html
body
h1 点击图片弹出不同的提示框/h1
img styleborder: 1px solid blueviolet src./test.png width200 height400useMap#settingmap namesetting }!-- 点击【开始】区域(整个开始方框框起来的地方)网页会弹出【开始】字样--area shaperect coords39,4,108,38 onclickalert(开始)/!-- 点击【满意】区域(整个开始方框框起来的地方)网页会弹出【满意】字样--area shapePoly coords72,290,35,307,72,322,110,306 onclickalert(满意)/!-- 点击【结束】区域(整个开始方框框起来的地方)网页会弹出【结束】字样--area shaperect coords34,361,108,389 onclickalert(结束)/
/map/body
/html
