文章標籤 ‘image’

6

CSS Image Rollover 延伸應用

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

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

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

October 24th, 2009

Read More

No

圖片取代文字

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

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

July 28th, 2009

Read More

2

CSS Image Rollover

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

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

July 5th, 2009

Read More