Yahoo 一張圖做晒,想學下...

想睇下用 javascript 定還是 css...

Yahoo 用呢一張圖
http://l.yimg.com/mq/i/buzz/buzz_icons_1.2.png

做晒呢版
http://hk.buzz.yahoo.com/

大概理解得到,可以用 css 定位
但係佢點樣可以度得咁準,真係一個個試位置?!
有好方法量度?

[ 本帖最後由 LikPan 於 2010-1-11 11:51 編輯 ]

background-position

TOP

image software can get the position~~also it need the position when making it
no need to try slowly

TOP

yahoo佢地當然唔會一個個試!
yahoo佢地自己寫出黎,自然可以知道每個圖exactly既位置
你自己整果時,記低每個icon既dimension
咁就唔會浪費時間試

TOP

it is called CSS sprites, quite popular in recent days since it saves a lot bandwidth...
here is some details you may interested:
http://css-tricks.com/css-sprites/

TOP

原帖由 梁炳 於 2010-1-11 15:14 發表
yahoo佢地當然唔會一個個試!
yahoo佢地自己寫出黎,自然可以知道每個圖exactly既位置
你自己整果時,記低每個icon既dimension
咁就唔會浪費時間試


.....我忽略左軟件入面有 X Y

TOP

原帖由 LikPan 於 2010-1-11 16:59 發表


.....我忽略左軟件入面有 X Y

哈哈
依個方法就好似寫GAME既SPRITE咁, 以2進制為單位, 細而又經常使用既GRAPHIC就會用一個大圖用XY去CALL, 咁樣MEMORY MANGEMENT 就會做得好好, 中間唔會出現太多LEAK

TOP

原帖由 ioptional 於 2010-1-11 19:45 發表

哈哈
依個方法就好似寫GAME既SPRITE咁, 以2進制為單位, 細而又經常使用既GRAPHIC就會用一個大圖用XY去CALL, 咁樣MEMORY MANGEMENT 就會做得好好, 中間唔會出現太多LEAK

咁又幾好喎  
正係呢點就令我以後都會咁做

[ 本帖最後由 LikPan 於 2010-1-11 20:56 編輯 ]

TOP

其實呢個技巧既重點係減少http request
不過唔好做到張圖太大
否則弄巧反拙,反而load慢左

TOP

這是用 background-position 或 clip 做的,如果要準,就最好用 px,唔好用 pt, em , % 之類。
其實咁做,都係想你 load 得快 d 姐。
因可以減少總計的連線、詢問同等待回應的時間,也可以減佢個  sev. 的 loading
在 localhost 的情況下 load 一個 file 連線時間:0ms、詢問時間:平均要 30ms、等待回應的時間:平均要 160ms,在 localhost 的情況下 load 一個 file 最少也要 180ms,如果在網絡上時間一定會更長,仲未計接收資料的時。
仲有,有些情況下可令個 total file size 減少(jpg 未必可以減少)。

TOP