js實現(xiàn)點擊圖片改變頁面背景圖的方法
更新時間：2015年02月28日 09:09:31 作者：代碼家園
這篇文章主要介紹了js實現(xiàn)點擊圖片改變頁面背景圖的方法,實例分析了javascript操作css與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)點擊圖片改變頁面背景圖的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<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>
<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程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js+html+css實現(xiàn)手動輪播和自動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
如何獲取事件源及觸發(fā)該事件的對象，方法有很多，js中可以通過event來實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了js判斷輸入字符串長度，漢字算兩個字符，字母數(shù)字算一個，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)硪黄仙Ｕ刯s動態(tài)添加事件--- 事件委托。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
Javascript學(xué)習(xí)筆記:錯誤處理.2009-07-07
這篇文章主要介紹了JS實現(xiàn)靈巧的下拉導(dǎo)航效果代碼,通過自定義js插件腳本dropdown.js實現(xiàn)簡單的下拉導(dǎo)航效果的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
javascript中apply和call方法的作用及區(qū)別說明
本篇文章主要是對javascript中apply和call方法的作用及區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了JS應(yīng)用正則表達式轉(zhuǎn)換大小寫，以首字母大寫，其它字母小寫為例，喜歡的朋友可以參考下2014-09-09
JSON+JavaScript處理JSON的簡單例子，需要的朋友可以參考一下2013-03-03
這篇文章主要給大家介紹了關(guān)于如何基于three.js實現(xiàn)的3D粒子動效的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04