好久沒有分享一些網頁技術技巧了，這次來介紹一下豪豪從網頁寫作技巧的寶庫 DynamicDrive 看來的「Lightbox」以及 DynamicDrive CSS Library 所刊載的「Popup」這兩個技巧，並實際整合應用，並在此介紹給大家。
先給各位看一下下面這個範例：
請將滑鼠移到圖片上面，並且使用滑鼠點選圖片，看看會發生哪些事情？
大紀元新聞剪影 in text
大紀元新聞剪影 in span
不知道這樣的小技巧，是否能讓您感興趣呢？喜歡的話，我們就開始玩吧！
當然，如果想要運用在自有伺服器或是自己的網站上，難度應該不大，但是若想要使用這種技巧，運用在公共部落格系統（例如目光相對、無名小站、天空部落格等等）的話，部落格系統必須滿足：
1）開放<head>區段給使用者自行運用。
2）可以自由設定CSS樣式表。
3）可以存放小檔案。
以上三項，是可以達成這個目的的先決條件。要是您的系統不提供這樣的環境，建議您換個系統使用，或是乾脆死了這條心吧！...ˊˋ
首先，請先 Download lightbox.zip 這個檔案，然後將解開壓縮檔後，裡面的三個圖檔，先行上傳（或複製）到系統內備用（這是LightBox這項技法的必備品喔！）。
接下來，用記事本或其他文字編輯軟體，打開您解壓出來的 lightbox.js，找出：
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
這兩段文字，並且將紅字部份修改：
var loadingImage = 'http://你的存檔路徑/loading.gif';
var closeButton = 'http://你的存檔路徑/close.gif';
修改完畢以後，請將 lightbox.js 也上傳（或複製）到系統內吧！
接著，請將下面這段文字，於修改紅色部份後，放進您的CSS樣式表中：
/* Lightbox */
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }
#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }
#overlay{ background-image: url(http://你的存檔路徑/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://你的存檔路徑/overlay.png", sizingMethod="scale");
}
/* ------------------------------------------------- Lightbox End ------------------------------------------------- */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
好了，系統內的準備工作已經完成嚕。接下來，怎麼樣寫，才能夠寫出這樣的效果呢？
<a href="圖檔網址" title="圖檔標題" rel="lightbox" class="thumbnail"><img src="圖檔網址" vspace="數字" hspace="數字" width="數字" height="數字" /><br />文字<span><img src="圖檔網址" /><br />圖檔標題</span></a>
上面的書寫法，是較為完整的型態，實際表現效果，就如同前面那張圖片所表現的一樣。實際上說來，網頁裡面顯示圖片的需求，不盡然都如同上面那張圖片那麼的複雜，所以當然也有一些變化的形式存在。在介紹之前，先針對比較特別的一些標籤與語法稍微解釋一下，以便於理解。
rel="lightbox" -- 這是啟動 Lightbox 的宣告關鍵字，必須放在 <a> 語法標籤的 '>' 之前，才能生效。
class="thumbnail" -- 這是啟動 Popup 的宣告關鍵字，一樣也必須放在 <a> 語法標籤的 '>' 之前，才會生效。
title="圖檔標題" -- 一般來說，這是作為圖片連結失效，或訪客使用純文字瀏覽器（如 Lynx）的情況下，作為圖片的輔助說明之用。在使用 Lightbox 作為圖片顯示方式時，這邊所寫的文字，也作為圖片說明文字使用。
下面兩個參數，是 <img /> 標籤的圖片控制參數，用來控制圖片擺放時與文字的間距之用。
vspace="數字" -- 設定與文字間的垂直間距。
hspace="數字" -- 設定與文字間的橫向間距。
下面兩個參數，一樣也是 <img /> 標籤的圖片控制參數，用來控制圖片擺放時的顯示尺寸之用。
width="數字" -- 設定圖片的顯示寬度。
height="數字" -- 設定圖片的顯示高度。
<span></span> -- 這是一個建立區塊的語法標籤。由於是用來顯示使用 Popup 技巧時所需的圖片之用，必須放在連結語法標籤的文字區域內，也就是<a>跟</a>這個結束標籤的中間。
好了，大致的介紹了這幾個重要的咚咚，也許豪豪介紹的還不夠周詳（畢竟不是為了入門新手所寫的...^^;），不足之處，您可能得自己查一下網頁設計語法介紹的書籍了，拍謝ㄟ...^^;
接下來，就要進入實際應用的介紹了。
首先介紹的是單純使用 Lightbox（想看效果？請點我！）時的寫法：
<a href="http://圖片存檔網址" title="標題文字" rel="lightbox">連結說明文字</a>
接著介紹使用 Popup（想看效果？請把滑鼠指標移過來！）
大紀元新聞剪影 in span時的寫法：
<a href="http://圖片存檔網址" title="標題文字" class="thumbnail"> 連結說明文字<span><img src="http://圖片存檔網址" /><br />說明文字</span></a>
※注意：不論是否與 lightbox 混用，使用這個模式時，圖片有可能會因為兩側邊欄所設定的邊界，而使較大的圖片無法完全顯現，可能不適合用在大圖片的顯示上。（尤其是三欄式或文章在左側的雙欄式部落格系統版型，更容易出現這個問題。）
網頁中不顯示圖片，使用 Lightbox + Popup 整合效果（想看效果？請把滑鼠指標移過來，點點我！）
大紀元新聞剪影 in span來顯示圖片
<a href="http://圖片存檔網址" title="標題文字" class="thumbnail" rel="lightbox">連結說明文字<span><img src="http://圖片存檔網址" /><br />圖片說明文字</span></a>
其他應用變化，就看各位的技巧嚕！^_^
呼，寫的好累....>_<，祝福大家玩的開心，部落格的風貌更美唷！^_^
留言列表
