在很多时候,我们需要在某一个图片上面的具体位置添加互动操作,比如人的头或者脸,添加点击事件或者其他事件等.因此我们需要准确的找到图片上面的位置点,才能做出正确的操作!下面我就带大家完成这样的功能.
准备一张图片.自己准备实现的功能如下图所示.当用户登陆一个网站或者其他进入口时,提示他们自己系统推荐的使用浏览器,当用户鼠标移动到浏览器上面的时候,有一个小手的状态,点击之后,带入到具体的浏览器下载地址.
将图片首先显示在网页上面建议大家去下载一个html编辑器或者其他网页编辑器之类的.我们可以使用div将其背景图片设为上面的图片.div对于控制界面的布局以及网站的兼容性之类的问题,还是各大浏览器都支持比较好的.
找到自己要操作的位置点因为大一点的是一个div,因此我们只需要在这个div中嵌套其他几个div,采用相对布局.就可以找到要需要的位置,我们这里的找的位置就是图中显示的浏览器位置.代码在右边,效果图在左边.
添加相应的事件针对具体的需求我们添加具体的相应事件,点击事件或者鼠标滑动事件等常用事件.这里我们需要的是点击事件.这里我们使用ajax技术来实现点击事件,当然你也可以采用基础的html技术也是可以的.
美化操作.这里我们需要做的就是,去除第三步上面的红色边框,跟添加其他剩余的几个div到相应的浏览器位置.其次,我们需要修改点击事件之后的逻辑处理,修改为点击打开另一个下载页面.
测试内容:因为涉及到的链接地址比较多,所以在完成以上操作之后,最好测试下链接打开跟链接地址是否正确.至此我们就完成了在响应的图片上面添加需求.