作者TonyQ (骨頭)
看板Web_Design
標題Re: [問題] 圖片被點到會變色如何做
時間Fri Oct 5 09:39:15 2007
※ 引述《aceone ()》之銘言：
: : → grence:如果比較熟js 又不是土法鍊剛的笨方法 能解決就是好辦法 10/04 21:16
: : 推 shadowjohn:我也很好奇…用js寫為何不好@@? 10/04 22:04
: 啊~抱歉，其實我跟js不熟^^"
: 會這麼說是因為之前接了網站美化的案子，
: 原程式設計為了製造滑鼠滑過的效果，
: 在行內塞了共幾十行的js，
: 我很疑惑，他的class都設的好好的，
: 為啥不用a:hover去做就好了，
: 然後我越改越頭大 囧
: 就...以視覺設計的角度來看，用CSS會比較好維護啦。
: (無意貶低js 拍謝!)
: 另外，這也是個常用的簡單CSS技巧，
: 稱為Sliding Doors，原作者Douglas Bowman( http://www.stopdesign.com/ )
: 他在A List Apart上有詳細的文章說明這個技巧：
: part1: http://www.alistapart.com/articles/slidingdoors/
: part2: http://www.alistapart.com/articles/slidingdoors2/
因為hover其實是onmouseover 跟 onmouseout的組合，
其實不見得hover會比較好用，還是有需要用js的時候。
比方說兩個以上的連動，你要hover a 順便b要跟著改變內容變成a的值，
這個css根據我的認知應該做不到吧，url hack不算啦，這已經做弊了。-_-;;
另外hover 用在非 <a>的tag , IE7才開始支援,
我以前在這上面栽了一道 . XD
其實用js寫也可以很簡單的，只是你碰到的狀況比較糟糕而已。
一般來講，就算要用js也會拆成兩個function
分別丟onmouseover跟onmouseout，
剩下的幾十行或好不好維護的問題，交給.js去過問。
你可能沒維護過全部html都由js產生的網頁，那個對vd來講應該才是惡夢，XD
不過這在不操爆browser的前提上，是可能能降低伺服器流量的好方法。
話說回來，根據經驗你那個網站之前寫的人有沒有時間慢慢想怎麼維護，
可能都還是個問題。XD
--
▄▅▆▇███▇▆▅▄▃ ╰┼╯─╮ ╮
◥███████████◣ ╰┼╯＝│=│
◥██████───────◣ ＊． ╯ ╯ ╯ の 物 語 ．＊
◥███████──────◣ ～ ◢◣ ◢◣
◥██████───────◤ ◥◤＊ 空白的世界．翼
＊◥◤
◥██▁▂▃▄▅▆▇███▆▅▄▃▂▂
～telnet://tony1223.no-ip.info
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.115.77.13
※ 編輯: TonyQ 來自: 59.115.77.13 (10/05 09:40)
1F：推 aceone:嗯,謝謝指教:) 我之前的觀念就是css辦不到的再交給js去做 10/05 10:19
2F：→ aceone:當然用css需要花費更大effort的例子,應該還是給程式去做囉 10/05 10:20
3F：→ aceone:至於那個案子的程式,我想他可能真的對css不熟 XD 10/05 10:24
4F：推 TonyQ:其實Hover我已經覺得CSS管太多 , 因為CSS應該只管畫面 , 10/05 13:31
5F：→ TonyQ:動作(onmouseover /onmouseout) 應該交給js處理才對 10/05 13:32
6F：→ TonyQ:不過a 有visied跟history這些屬性 , 也有很久歷史了,出發點 10/05 13:32
7F：→ TonyQ:我想都在"簡化" ,"只是語意很難兼顧 10/05 13:33
8F：→ TonyQ:而且回過頭來 , js可以指定node的className去配css 屬性 10/05 13:35
9F：→ TonyQ:畫面就交給css , 動作跟行為交給 JS 去處理(swap class) , 10/05 13:37
10F：→ TonyQ:"我個人"覺得會比較理想 我們再討論看看XD 10/05 13:38
11F：→ TonyQ:當然專精 CSS的人會覺得CSS能解決就用css 專精js的人用JS 10/05 13:39
12F：→ TonyQ:我自己是"稀少"碰到兩個都熟的啦...我是兩個都不熟 Q_Q 10/05 13:40
13F：→ TonyQ:所以這種狀況我是覺得很正常就是了 XD 10/05 13:41
14F：→ TonyQ:當然 我還是很祈禱不要碰到寫 url hack式css的設計 XD 10/05 13:42
15F：→ cassatte:不敢想像沒有 a:hover 的日子 10/05 13:51
16F：推 aceone:喔~css還有:before跟:after,贊成派就是覺得那也算版面設計 10/05 16:45
17F：→ aceone:的一環吧,不知道t大說的url hack是怎樣咧?怕自己不知不覺就 10/05 16:46
18F：→ aceone:用了 XD 10/05 16:48
19F：→ TonyQ:background:url("javascript:alert('hi')"); 10/05 17:01
20F：→ TonyQ:類似吧 , 我沒有確認語法 . 總之就是在url下javascript:呼叫 10/05 17:01
21F：→ TonyQ:js , 這種我會昏.... 10/05 17:02
22F：→ aceone:喔喔 還有這招喔 ψ(._. )> XD 10/06 00:47
23F：→ TonyQ:這個是XSS的變形... 10/06 10:43