html切換背景圖片_html中怎樣定時變換背景圖片

Ⅰ html中如何滑鼠點擊更換背景圖片

html中滑鼠點擊更換背景圖片的方法：

1、html代碼：

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

2、css代碼：

ul.menu > li > a{

float:left;

width:265px;

height:50px;

margin-top:450px;

text-align:center;

line-height:50px;

color:#ddd;

background-color:#333;

letter-spacing:1px;

cursor:pointer;

text-decoration:none;

text-shadow:0px 0px 1px #fff;

}

ul.menu > li ul{

list-style:none;

float:left;

margin-top:-180px;

width:100%;

height:110px;

padding-top:20px;

background-repeat:no-repeat;

background-color:transparent;

}

ul.menu > li ul li{

display:none;

}

ul.menu > li ul.sub1 {

background-image: url('../img/bg1sub.png');

}

ul.menu > li ul.sub2 {

background-image: url('../img/bg2sub.png');

}

ul.menu > li ul.sub3{

background-image:url(../img/bg3sub.png);

}

ul.menu > li ul li a{

color:#fff;

text-decoration:none;

line-height:30px;

margin-left:20px;

text-shadow:1px 1px 1px #444;

font-size:11px;

}

ul.menu > li ul li a:hover{

border-bottom:1px dotted #fff;

}

ul.menu > li ul.sub1 li{

display:block;

}

3、js代碼：

if (!document.defaultView || !document.defaultView.getComputedStyle) { // IE6-IE8

var oldCurCSS = jQuery.curCSS;

jQuery.curCSS = function (elem, name, force) {

if (name === 'background-position') {

name = 'backgroundPosition';

}

if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name]) {

return oldCurCSS.apply(this, arguments);

}

var style = elem.style;

if (!force && style && style[name]) {

return style[name];

}

return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);

};

}

var oldAnim = $.fn.animate;

$.fn.animate = function (prop) {

if ('background-position' in prop) {

prop.backgroundPosition = prop['background-position'];

delete prop['background-position'];

}

if ('backgroundPosition' in prop) {

prop.backgroundPosition = '(' + prop.backgroundPosition;

}

return oldAnim.apply(this, arguments);

};

function toArray(strg) {

strg = strg.replace(/left|top/g, '0px');

strg = strg.replace(/right|bottom/g, '100%');

strg = strg.replace(/([0-9.]+)(s|)|$)/g, "$1px$2");

var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)s(-?[0-9.]+)(px|\%|em|pt)/);

return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]];

}

4、實現效果

Ⅱ html如何改變背景圖片

如果你想向網頁中添加圖片，用HTML就可以了。但是如果你想將一張圖片設置為網頁背景圖片，就同時需要HTML和CSS。HTML的全名叫做「超文本標記語言」，是一種用來指示瀏覽器在網頁中顯示什麼內容的代碼。CSS的全名叫做「層疊樣式表」，用來改變網頁外觀和布局。你還需要一張用於web頁面的背景圖片。

部分 :
新建文檔

1
創建一個文件夾用來存放HTML文件和背景圖片。在電腦上創建並命名一個文件夾，方便日後查找。
你可以為文件夾隨意命名，但是使用HTML時，最好養成習慣，使用簡短的單個單詞來命名文件和文件夾。

2
將背景圖片放入HTML文件夾。將你想要用作背景的圖片放入HTML文件夾。
如果你不在意網頁是否能在網速較慢的舊設備上運行順暢，可以使用高解析度圖片來作為背景。選擇帶有重復圖樣的簡單圖片作為背景也不錯，因為你可以在這種背景下閱讀任何文本。
如果你沒有圖片，可以下載免費的背景圖。下載好圖片，將它放入創建好的HTML文件夾中。

3
創建一個HTML文件。打開文本編輯器，然後新建一個文件。將文件另存為index.html。
你可以使用任何你想要的文本編輯器，系統自帶的文本編輯器也可以，如Windows的記事本，以及Mac OS X的文本編輯器。
如果你想要使用能處理HTML的文本編輯器，點擊這里下載Windows、Mac OS X、Linux操作系統都可以使用的文本編輯器Atom。
如果你使用的是Mac電腦的文本編輯器，在開始編寫HTML文件之前，單擊「格式」菜單，然後單擊「生成純文本」。該設置會確保HTML文件在網頁瀏覽器中正常載入。
諸如Microsoft Word之類的文字處理程序並不適合編寫HTML，因為它們添加了一些不可見的字元和格式，這些字元和格式可能會破壞HTML文件，讓它無法在網頁瀏覽器中正確顯示。

部分 2 的 5:
編寫HTML文件

復制並粘貼標准HTML代碼。選擇並復制下面的HTML代碼，然後粘貼到打開的 index.html文件中。

Ⅲ html背景圖片設置

一、首先HTML布局：

<!DOCTYPE html>

<head>

<title>背景圖設置</title>

</head>

<body>

</body>

</html>

二、添加CSS樣式：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>背景圖設置</title>
<styletype="text/css">
.box{
width:700px;
height:350px;
margin:0auto;
background:url(pic.jpg)no-repeatcenter;
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
</html>

三、html+css最終在瀏覽器顯示的效果：

Ⅳ Html按鈕點擊後會變換背景圖片

這種更換背景的問題一般來說是由於後台伺服器的響應和你前端之間的不是實時傳送有一定關系所以這個不是大問題

Ⅳ html中怎樣定時變換背景圖片

1.准備相關圖片(1.jpg,2.jpg...n.jgp)
2.編寫一個html頁面用以顯示圖片
並設置為自動定時更新圖片
3.將改html頁面設置為桌面背景
該「桌面」隔定時自動刷新更新圖片顯示
===============================================
1.將自己需要的圖片如英語小卡片名人名言等
集結在一個文件夾下並進行命名如1.jpg,2.jpg...
這樣在最後的桌面上就可以學習英語或名言了
2.編寫如下示例的html頁面放在該圖片文件夾中
假設該html頁面名稱為myPicDesktop.html

其中之所以設置td的寬度為50%
是想控制項圖片的顯示位置在桌面的右半部
因為通常桌面的左半部都有很多圖標
示例代碼如下:

<html>
<head>
</head>
<script language="javascript">

window.onload=refleshDesktopPic

function refleshDesktopPic()
{
var i = 1;
var j = 0; //圖片的順序號
var k = 8; //圖片的張數
var m = 30*1000; //每張顯示的時間毫秒
var n = 2; //循環遍數
//
while(i<=(n*k))
{
j= i%k;//應該循環第幾張圖片以顯示

if(j==0)
j=k;//最後一張圖片的序號

//隔一短時間後再替換為另一張圖片
setTimeout("setPic("+j+")",(m*i) );

i = i+1;
}
}

function setPic(picSeqNum)
{
document.all.myDiv.innerHTML = "<image id='image2' src='"+picSeqNum+".jpg'></image>";
}

</script>
<body>
<table width="100%">
<tr>
<td width="50%">
</td>
<td>
<div id="myDiv">
<image id="image1" src="1.jpg"></image>
</div>
</td>
</tr>
</table>
</body>
</html>

3.以Win2003系統為例
桌面->右鍵->屬性->桌面標簽頁
->自定義桌面->打開「桌面項目」設置框
->Web標簽頁
->點擊新建按鈕
->打開「新建桌面項目」設置框
->點擊瀏覽按鈕
->找到第2步所編輯的myPicDesktop.html
->確定 ->應用 ->確定

可以查看效果
起初該html頁面做為桌面並沒有最大化展開
而是縮小的顯示在桌面的右中部
可以滑鼠放上去在頁面的右上角點擊最大化按鈕
以使html頁面有桌面那麼大顯示
當想關閉該html頁面時同樣點擊該頁面的右上角的關閉按鈕即可
就像正常的網頁一樣操作就好

Ⅵ html 製作一個導航,點擊後切換背景圖片.

Ⅶ html中怎麼換背景圖

如果是換背景圖片的話。
可以在網頁點擊滑鼠右鍵查看源代碼；
然後找到css裡面的背景圖這段代碼，查看背景圖路徑；
然後通過ftp或者伺服器進行替換圖片即可。

Ⅷ html中背景圖片,滑鼠移動上去之後切換為另一個圖片

a:hover{
background-img:url(a.jpg);
}

html切換背景圖片

與html切換背景圖片相關的內容