用2張圖片製作一個有Mouseover效果的Button (JavaScript) 用2張圖片製作一個有Mouseover效果的Button (JavaScript)
      ez      2013-08-28

繼上次使用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切換效果


我要留言