繼上次使用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>

一直很想試試看自己做一個有Mouseover效果的Button，這次參考了重灌狂人的文章提供的語法，在修改之後就出來囉！

• Mouseover變換文字顏色
• 固定在該區塊的左邊
• 文字上下左右置中
• Clicks直接換頁

【成品】

【範例語法】

<div style="float: left;">
    <div style="width: 180px; height: 50px; font-size: 25px; color: #777777;
		background-color: #ffeedd;
		border-style: dashed;
		line-height: 50px;
		text-align: center;
		cursor: pointer;"
		title="Mousever看看 "
		onclick="location.href = '目標連結'"
		onmouseover="this.style.color='#CC5533';"
		onmouseout="this.style.color='#777777';">
		Mousever看看
	</div>
</div>