i-design

因為案子實際需求所延伸出來的應用技巧，而骨子裡用的就是 Image Rollover。

實際情況是選單前需要有代表性 icon，icon 是包覆在 <a> 裡的 <img>，但選單本身因為登入者權限的不同，開放可點的選項也不同，而不能點選的選項 icon 必須是灰階的狀態。

換句話說，有 <a> 時影像是有色彩的，若只是單純的 <li>選單</li>，則影像必須是灰階無色彩的。

說要做 Switch Style 說了好幾個月，一來當做 Theme design 的練習，二來一直認為深色版面並不適合中文網站，不過拖了半年才把東西做出來，偷懶偷很兇。

還是有些技術方面的問題，然後 IE6 應該是爛的，不過瀏覽正常也就懶得處理了。

用的是最簡單的 styleswitcher.js，原本是希望能做到每隔一段時間自動換 theme，但是面對 wordpress 與 php 結合的問題，對於不會程式的我實在頭痛，所以乾脆整個簡化。

這是最近一再遇到的例子，文章本身單純只是想表達為何不該再用圖片取代一般文字內容。

很久很久以前，在自己還在用 <table> 切版時，為了美觀也非常喜歡用圖片取代應有的文字內容，在那個年代，不懂什麼是網頁標準、不懂什麼是使用者經驗、不懂 CSS，只知道為了美觀就應該不厭其煩的用圖片，因此，三分鐘可以做好的事要花三個小時甚至更長的時間處理，做自己的網站也就罷了，時間成本自己吸收，但做別人的東西時就開始知道痛在哪裡了，即使只有一個字的變動也是要大費周章的開啟 Photoshop 重切圖片。然後，開始一昧的怪罪中文字型：「為什麼那麼多鋸齒！為什麼只有兩種字型可以用！」，最後連為什麼要生在台灣非得用中文都出來了。在那個時期完全沒想過根本就是自己能力的不成熟，只想用圖片消滅一切的中文字。

簡單的一個小技巧。有時呈現照片或廠商 logo 時會希望有些變化，當滑鼠 hover link 時讓灰階換成原本的彩色圖檔，但因為某些緣故必須以 <img> 方式呈現，這時就可以靠這方式簡單做到想要的效果。

基本原理就是利用 overflow: hidden 以及 position 讓圖檔隱藏，當滑鼠移過時再秀出隱藏的部分。將圖檔上下合併成一張。

國外盛行的服務 PSD to HTML 漸漸開始出現在台灣，自己也開始在接觸這塊，畢竟大多數情況下這技術對自己並不是問題，有這樣的市場就沒道理跟銀子過不去，但內心仍舊感到這種模式並不是一個好的發展空間，感覺存在很多淺在的問題。

正常情況下 Visual designer 最清楚自己設計的東西，在設計畫面同時往往已經明白考慮過在實際頁面上會是什麼狀態，HTML/CSS 該怎麼寫來達到心中想要的效果，滑鼠移過去又該是怎麼樣的一個變化，所有細節都在心中盤算過才會出 PSD。

每次開始一個新專案總要準備東準備西，同時建立基本架構老要重複寫幾乎一樣的 code，所以乾脆試著把 YUI 的 reset、fonts、base-min 通通綁在一起，再來 header、nav、main、sidebar、stickyfooter、form、pagging 也順便寫一個簡單、易於修改的 style。

basic style