繼上次使用CSS製作Button後，這次要來嘗試用兩張圖片製作，預計效果如下

• Mouseover換圖顯示
• 固定在該區塊的左邊
• Clicks外跳視窗

【成品】

【製作解說】

作法一，改變CSS的Style，使用background這個元素做變化 [完整語法]

<div style="width: 110px; height: 40px;cursor: pointer; background: url(圖片網址);"
	title="Mouseover會切換"
	onClick="window.open('網址')"
	onmouseover="this.style.background ='url(圖片網址)';"
	onmouseout="this.style.background='url(圖片網址)';">
</div>

[標籤、函數說明]→width: 110px; ，設定區塊寬度 → height: 40px;，設定區塊寬度 → cursor: pointer，游標放在該區塊顯示的樣式，這裡指一個小手的樣式 → title="Mouseover會切換" ，游標在區塊時顯示的提醒文字 → onClick="執行事件"，當Click的時候執行指定事件 → window.open('URL')，設定開啟一個新網頁 →→ onClick="window.open('URL')"，Clicks開啟特定網址的新網頁 → onmouseover="執行事件"，當游標移到元素的時候執行指定事件 →→ onmouseover="this.style.background ='url(圖片網址)'"，當游標移到元素的時候，改變樣式的背景圖片 → onmouseout="執行事件"，當游標移出元素的時候執行指定事件 →→ onmouseout="this.style.background ='url(圖片網址)'"，當游標移出元素的時候，改變樣式的背景圖片

作法二，改變img的src路徑 [完整語法]

<div style="width: 110px; height: 40px;center; cursor: pointer;">
	<img src="圖片網址"
	title="輸入標題"
	onClick="window.open('輸入目標網址')"
	onmouseover="this.style.img src='圖片網址';"
	onmouseout="this.style.img src='圖片網址';"
	/>
</div>

[標籤、函數說明] 元素標籤方法一相同， 差異在於如果使用img的方式，則JS要放在img層 =====下次我要學===== *用1張圖，使用CSS的定位做出Mouseover的Button切換效果