编程 Javascript

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程序设计有所帮助。

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

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

List all the Databases on a SQL Server

Jun 21 Javascript

用javascript实现的激活输入框后隐藏初始内容

Jun 29 Javascript

AJAX分页的代码(后台asp.net)

Feb 14 Javascript

jQuery.prototype.init选择器构造函数源码思路分析

Feb 05 Javascript

JS禁用浏览器退格键实现思路及代码

Oct 29 Javascript

jQuery中change事件用法实例

Dec 26 Javascript

javascript解析ajax返回的xml和json格式数据实例详解

Jan 05 Javascript

JS运动特效之链式运动分析

Jan 24 Javascript

Vue 中axios配置实例详解

Jul 27 Javascript

layui-table对返回的数据进行转变显示的实例

Sep 04 Javascript

TypeScript中使用getElementXXX()的示例代码

Sep 12 Javascript

jQuery实现王者荣耀手风琴效果

Jan 17 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

PHP4与PHP3中一个不兼容问题的解决方法

2006/10/09 PHP

PHP+JS+rsa数据加密传输实现代码

2011/03/23 PHP

php变量作用域的深入解析

2013/06/03 PHP

ThinkPHP CURD方法之data方法详解

2014/06/18 PHP

PHP对象相关知识总结

2017/04/09 PHP

ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例

2019/04/03 PHP

php7下的filesize函数

2019/09/30 PHP

Javascript打印网页部分内容的脚本

2008/11/17 Javascript

javascript form 验证函数弹出对话框形式

2009/06/23 Javascript

javascript void(0)的妙用

2009/10/21 Javascript

javascript 隐藏/显示指定的区域附HTML元素【legend】用法

2010/03/05 Javascript

jQuery scroll事件实现监控滚动条分页示例

2014/04/04 Javascript

Jquery Ajax方法传值到action的方法

2014/05/11 Javascript

node.js中的fs.closeSync方法使用说明

2014/12/17 Javascript

js实现class样式的修改、添加及删除的方法

2015/01/20 Javascript

js实现右下角提示框的方法

2015/02/03 Javascript

详解AngularJS中自定义指令的使用

2015/06/17 Javascript

ES6中非常实用的新特性介绍

2016/03/10 Javascript

使用BootStrapValidator完成前端输入验证

2016/09/28 Javascript

BootStrap 标题设置跨行无效的解决方法

2017/10/25 Javascript

浅析JavaScript中的特殊数据类型

2017/12/15 Javascript

JavaScript 截取字符串代码实例

2019/09/05 Javascript

简单上手Python中装饰器的使用

2015/07/12 Python

学习python中matplotlib绘图设置坐标轴刻度、文本

2018/02/07 Python

Python利用Scrapy框架爬取豆瓣电影示例

2020/01/17 Python

pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)

2020/03/25 Python

AmazeUI 单选框和多选框的实现示例

2020/08/18 HTML / CSS

JSF面试题：如何管量web层中的Bean，用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?

2012/10/05 面试题

艺术应用与设计专业个人的自我评价

2013/11/19 职场文书

房屋买卖协议样本

2014/11/16 职场文书

立秋之描写立秋的作文（五年级）

2019/08/08 职场文书

goland 恢复已更改文件的操作

2021/04/28 Golang

将图片保存到mysql数据库并展示在前端页面的实现代码

2021/05/02 MySQL

浅谈python数据类型及其操作

2021/05/25 Python

Python的三个重要函数详解

2022/01/18 Python

mysql下的max_allowed_packet参数设置详解

2022/02/12 MySQL