i-design

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

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

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

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

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

很初階的 photoshop 技巧，對圖層有些概念以及會使用筆型工具 (貝茲曲線) 就可以繪製了。首先找張自己高解析的照片，最好能高於 1024*768，這樣在繪製細部時會比較好掌握，不過這裡因尺寸問題會縮小示範。使用筆型工具按照輪廓描繪，描繪時可以先將圖層透明度歸零，這樣才不會遮住你俊俏美麗的臉龐。