三月8

[CSS]滑鼠移過表格列變色及附加連結效果

tags | Comments(3)

老實說這個標題不知道要怎麼下比較好理解。我想要滑鼠移過表格某一列時會變色，而且不只超連結的文字可以點，而是整列都有連結效果….囧…先直接看 Demo 吧！
要達到這種效果，很多教學都是使用 JavaScript 裡的 onmouseover、onmouseout 及 onclick 事件來達成，不過現在有純 CSS 的解法，並且通用多數瀏覽器，這個技巧其實在很多國外網站看過，不過昨天向艾德請教之後才真正學起來^^
#tb td a {    display: block;    height: 35px;    line-height: 35px;    background: #FFF9E0;}#tb td a:hover {    background: #E2D9B2;}
關鍵就是使用 display: block 將 a 顯示為區塊元素，然後依照需求設個高度或寬度給它即可，line-height 給予相同高度可以確保文字垂直置中，這樣比使用 JavaScript 方便多囉。


十月5

建立網頁縮圖(Webthumb)

tags | No Comments

目前不少網站都有自動產生網頁縮圖的功能，像是 HEMiDEMi、funP 推推王、Alexa 等等，雖然很想知道其中所使用的技術，不過似乎很難找到相關文章，大多是倚賴提供縮圖服務的網站居多。
Bluga.net WebThumb
我覺得很不錯的縮圖服務網站，每個月可免費建立 250 組縮圖，且提供 API 可以應用在程式上，產生縮圖速度算滿快的，大約 2~5 分鐘即可顯示。
artViper Website Tools
這網站有提供一些 Website Tools，其中就有網頁縮圖的功能。
Website Thumbnail Generator
這個是不需要依賴其他網站的，使用了 IECapt 這個小工具，所以主機只能是 Windows，配合 PHP 來自動產生縮圖。
延伸閱讀：
Website Thumbnail Creators (Website Snapshot Generators)