※ 引述《ILoveHer (I Love Her)》之銘言： : ※ 引述《genever (what)》之銘言： : : 其實他只是用了onMouseOver跟onMouseOut的效果而已 : : （游標經過）（游標離開） : : <img id=ps1 src="pic1.jpg" : : onMouseOver="ps1.src='pic2.jpg';ps1.width=352;" : : onMouseOut="ps1.src='pic1.jpg';ps1.width=150;"> : : 至於框線他其實有加上 : : 只是太細了看不清楚 : 請問類似的效果可以用CSS做到嗎?? 可以 不過有點複雜...... 如下...... (不是很合格的網頁) <style type="text/css"> a.mylink:hover {background-image: url(2.jpg);height:40px;width:40px} a.mylink {display:block;background-image: url(1.jpg);height:20px;width:20px;color:#ffffff} </style> <a href="" class="mylink">a</a> 原理就是利用, a:hover 這種滑鼠指標移到連結上會變CSS設定的性質, 而移走後 又恢復成原來的樣子, 於是當滑鼠移到連結的區域, 就把背景圖更換(換成大的) , 但也因為圖是放在背景的關係, 所以必須指定 height 和 width 才能夠正確 顯示全部的圖(否則瀏覽器會依照內容自行設定大小), 並且這個用法將 a 的 display從inline硬是改成了block, 不過這也無所謂, 因為會這樣做通常你會讓 他靠到最左邊或是最右邊, 就不會影響, 如果還是要維持 a 的 display:inline 的話, height 改成 line-height就可以解決這個問題, 但是接者就要考慮垂直對 齊的問題了 解說 background-image 背景圖 height 產生的區塊高度 width 產生的區塊寬度 display:block 指定一個網頁上的東西以 block 的方式呈現 color 文字顏色 :hover <a> 的虛擬類別, 只影響 <a> 在滑鼠移動到上面的時候 .mylink 指定(新設)mylink樣式 實際測試: block http://www.csie.ntu.edu.tw/~b92010/20040507+20040731/test.html inline http://www.csie.ntu.edu.tw/~b92010/20040507+20040731/test2.html 很新版本的 IE 和 Mozilla(Netscape) 都可以用...... 不過 inline的, 用 Mozilla會因為無法指定 width和 height(所以改成line-hieght) , 導致失敗(不過本來就不可以指定 height或是 width 吧......) 以上檔案20040731以後不一定還會活著...... -- 嘴角勉強撐起了笑 也要讓你看到最後一絲的驕傲 --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.66.73.162 好吧...... 好人做到底 ※ 編輯: charto 來自: 61.66.73.162 (05/07 21:46)