js实现点击图片改变页面背景图的方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现点击图片改变页面背景图的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<title>点击图片即改变页面的背景图片</title>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">

<script language="JavaScript1.2">

<!--

function tile(){

if (!document.all)

return

var source=event.srcElement

if (source.tagName=="IMG")

document.body.style.backgroundImage="url("+source.src+")"

}

function restore(){

document.body.style.backgroundImage=''

}

document.body.ondblclick=restore

-->

</script>

      </p>

      <p align="center"><span class="bgimages" onClick="tile();event.cancelBubble=true">

      <img src="/images/m01.jpg" height=65 width=96 border=2>

      <img src="/images/m02.jpg" height=65 width=96 border=2>

<br>

      <img src="/images/m03.jpg" height=65 width=96 border=2>

      <img src="/images/m04.jpg" height=65 width=96 border=2></span></p>

    </td>

  </tr>

</table>

</center>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
本人自用的global.js库源码分享
Feb 28 #Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 #Javascript
javascript计时器详解
Feb 28 #Javascript
Lab.js初次使用笔记
Feb 28 #Javascript
js实现鼠标感应图片展示的方法
Feb 27 #Javascript
JQuery基础语法小结
Feb 27 #Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 #Javascript
You might like
php IP及IP段进行访问限制的代码
2008/12/17 PHP
php计算数组不为空元素个数的方法
2014/01/27 PHP
php curl_init函数用法
2014/01/31 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
python人人网登录应用实例
2014/09/26 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
详解python Todo清单实战
2018/11/01 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python3常用内置方法代码实例
2019/11/18 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
英语老师推荐信
2014/02/26 职场文书
幼师求职信
2014/06/23 职场文书
本科应届生自荐信
2014/06/29 职场文书
画展邀请函
2015/01/31 职场文书
财务统计员岗位职责
2015/04/14 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
XX部保密工作制度范本
2019/08/27 职场文书