安德魯的部落格

  1. IE6 縮放網頁: using css + htc

    之前在小熊子朋友 DarkThread 的網頁看到一篇, 可以不用裝 IE7 / Firefox 等就可以有縮放網頁的功能.. 不過有個限制是要在網頁加上一段 html code, 逛的網頁不是自己能改的就頭痛了...

    之前這篇講到用 css 可以把所有的網頁縮放大小, 不過縮放比例是寫死在 css 裡的... 看到 DarkThread 的那篇, 就手癢了起來, 試試用 htc + css 的方式, 看看能不能藉著這個技巧把縮放網頁的功能散佈到所有的網站上...

    htc (Html Component) 是從 IE5.0 開始的 "新技術", 基本上它的目的就像 asp.net 的 server control, 你可以透過它創造自己的 html tag, 只不過 htc 是 client side 的技術, 而 server control 是 server side 的技術, 用法很像, 技巧完全不一樣...

    htc 在 IE5.0 只是很基本的 support, 它是從 css 裡的 behavior 延伸出來的, 因為它是靠 css 的 behavior 把 html element 跟 htc 綁在一起, 因此可以透過 css 直接把功能散佈到整個網站,  就變成它最擅長的地方了, 下次貼一篇把整個網站的右鍵選單停用的例子, 超簡單...

    原理大概是這樣, 因為 IE 提供了 user 自訂 css 的功能, 你可以把你自訂的 css 檔套用在所有你的 ie 開啟的網頁, 加上 htc (html component) 可以藉著 css 套用到網頁上, 這次就來試試這兩者的組合...

    1. 在 c:\ 放了三個檔案: zoom.htc / zoom.css / zoom.html (點這裡下載)

    2. 打開 IE, 工具 -> 網際網路 -> 存取設定 -> 樣式表 -> 指定 c:\zoom.css

    3. 開網頁, c:\zoom.html

    4. 按住 ALT, 同時點一下滑鼠左鍵, 不錯, 底下跳出 select 來了, 選百分比就可以直接改變網頁放大率...

     

    看起來好像很不錯, html 裡完全跟我自訂的 css / htc 沒關係, 但是效果卻出來了 (y). 不過在早期的 IE 這樣就大功告成了, 現在的 IE 可沒那麼簡單... :'(

    接著再打開 google 首頁看看...

    Orz, 因為 c:\zoom.htc 跟 http://www.google.com.tw 在兩個不同的 security zone, 而且 domain 也不同, 兩者的 cross talk 被 IE 給檔了下來... ouch... 看來就差這個該死的安全機制... 不然一切就太完美了... 這個限制還沒有找到很簡單的解法, 有點子的人就提供一下吧... :'(

    2006/11/12 HTML/CSS 技術隨筆

  2. 沒網路...

    好不容易等到周末, 結果一回家就沒電話沒網路... 還以為沒繳錢... 打去中華電信問才知道今晚施工, 要到明早才好... :@

    沒事做只好貼一貼來抱怨一下 :@

    2006/11/11 有的沒的

  3. CSS 擋右鍵

    先講在前面, 我是很不喜歡這種無聊的網站... 擋右鍵幹嘛? 也許站長真的覺的他的內容很了不起大家都想偷... 不過右鍵按下去一堆功能, 又不是每個人點右鍵都是要偷內容... 被當小偷看待的感覺真的挺不爽.. 真的要看, fillder 開下去什麼都看的到..

    好, 牢騷發完了 (H), 今天不是要講這個.. 因為工作的關係, 開發的系統是處理企業內部的 web content, 免不了有這種檔右鍵的需求, 這種 code 大家或多或少都寫過, 不過都寫的很煩吧...

    "什麼!!! 每一頁都要檔?"

    "每一頁都加 code 要加到什麼時後..."

    接到這種需求大概都想扁人吧, 咳咳... 我就是因為懶所以想到一招省事的... 先來看一下這個網頁, 看看大家追不追的到右鍵是怎麼擋的...

    test html page (full source)

    看出來為什麼右鍵被停用了嗎? 沒有 script tag, 也沒有 include 啥鬼東西, 開這個 page 的 link 也沒動啥手腳... 開 page 時 ie 也沒要求下載啥奇怪的軟體...

    不過, 右鍵的確是被 disable 了, 秘密就在這段 css ..

    body { behavior:url('context-menu-blocker.htc'); }

    這是 Microsoft 在 IE5 之後就引進的 DHTML Behaviors. CSS 是為了樣式而設計出來的, 目的就是希望一組網頁只要有共通的樣式, 就不用每一頁去調字型顏色等等... 只要透過 CSS 就可以把整個網站的每一頁, 在特定 tag 套用特定的樣式...

    "只能套用外觀嗎? 如果程式也可以這樣撒出去就好了"

    沒錯, behavior 就是這個目的, 把你想怎樣 "改造" 這個 tag 的 script 寫在 .htc 裡, 再用 css 把它綁到 tag 上, 一切就完成了.

    這個例子的 htc 只有去攔捷 oncontextmenu 事件, 攔下來後只有做取消事件的動作而以. 藉著 css 就可以把這功能套用到 page 上了... 當然, 你的網站有 css 的話, 這個功能馬上就套用到你所有的網頁了.

    這些技巧果然說穿了就不值錢... 咳咳, 不過 HTC 還有很多其它更讚的應用, 因為它很精巧的把 code 跟 tag binding 處理的很好, 很可惜這技術好像不大登的上抬面, 用過的人似乎不多, IE5.0 推出後, IE5.5 對 htc 有些改進, 之後就沒有啥新的進展了..

    不知道 IE7 對 htc 有啥改進? 有空再來試試了 :D

    2006/11/11 HTML/CSS 技術隨筆

  4. 小紅點缺料? Lenovo Sucks...

    難道 thinkpad 換東家之後真的要走下坡了嘛... 小紅點缺料? ouch ...

    從我之前的 X23, 到現在的 X31, 總共五年有了吧, 這倒是第一次碰到要索取還缺料的... 雖然小紅點的定價並不便宜, 不過也不用這樣吧, 東西小又不佔空間, 放了也不會壞, 全系列 ThinkPad 都通用的小紅點, 應該是很好控制庫存才對, 會用到缺料, 那真是 costdown 過頭了吧? 不然就是 lenovo 覺的三個月索取一次太便宜 user 了, 就用缺料來控制 user 消耗速度? hmmm...

    也許只是真的 "剛好" 缺料而以, 我也不差晚一陣子拿到小紅點, 只不過單純不爽發發牢騷... 下一台 notebook 還要不要買 ThinkPad 真的該好好考慮了, 購買動機好像真的只剩 keyboard ... :~~

    2006/11/04 有的沒的

  5. Canon Digital Camera 記憶卡歸檔工具 - RAW Support Update

    每次貼新東西, 小熊子都會來支持一下... 這次寫的記憶卡歸檔工具, 既然他抱怨了一下不支援 RAW file, 那當然要來找一下 solution.. 哈哈..

    順手找了一下, 發現資源真少, 追到最後只有一些 open source 的 project 提供 Canon 的 Raw File Access, 另外 Canon 也有自己的一套 Digital Camera SDK ( free, C++ only ), 要寫信去要, 不過不用收費就是.. 其它都是不成熟的 project, 看起來都不是很可靠 :S

    咳, c++ 已經好幾年沒碰了, 拿來唬唬還可以, 真的要動手就算了... 結果剛好讓我找到一條線索... Microsoft 提供一個簡單的 viewer, 可以直接看各家的 RAW file, 名字落落長: Microsoft RAW Image Thumbnailer and Viewer for Windows XP ...

    印相中這個工具可以看 canon crw, 而且安裝的系統需求是要裝 .net framework..

    "該不會有現成的 .net assembly 可以讀 canon raw file 的內部資訊吧?"

    試了一下, 隨便找個看的順眼的 dll 反組譯一下, 老天真是照顧我啊, 中獎!! 哇哈哈... 原本 DigitalCameraFiler.exe 的程式架構其實早就想好要怎麼改了, 只是之前一直找不到適當的 lib..

    找到的 assembly 用法很簡單, 只要先裝好 Microsoft RAW Image Thumbnailer and Viewer for Windows XP, 就可以在安裝目錄找到這個 assembly dll: RawManager.Interop.dll

    使用的方式也很簡單 (感謝 Microsoft 工程師的 coding style 都很一致... ), 隨便試一下就試出來了:

     

       22     CRawViewerClass raw = new CRawViewerClass();

       23     raw.Load(@"c:\CRW_1234.crw");

       24     Console.WriteLine("Camera Model: {0}", raw.CameraModel);

     

    這 Interop assembly 寫的還真不錯... 看起來真正做事的仍然是 Canon Digital Camera SDK... 不過現在我也可以用 C# 很簡單的叫來用, 哈哈, 感覺真爽...

    不過還沒挖到可以 edit raw 的 API, 感覺遜了一點, 但是小熊子都說了...

    chicken: 不過抓的東西很有限 :S, 也還沒辦法自動轉正
    Michael (小熊子): raw 不需要轉正說
    Michael (小熊子): raw 只要知道啥米時間拍的應該就 OK

    所以這部份就再說了 [H]... 哈哈...

    更新過的檔案下載: [DigitalCameraFilerSetup.msi]
    使用前請先安裝: Microsoft RAW Image Thumbnailer and Viewer for Windows XP

    2006/11/04 .NET 技術隨筆 有的沒的

Facebook Pages

Sponsor Ads