JavaScript小作品 -- 跳出式圖像

　　這次JavaScript小作品的創作目標是要寫一個小程式，可以自動化改寫部落格文章內所有圖片，讓圖片上的連結不是帶領使用者更換頁面，而是在頁面不改變的情況下跳出圖片。完成這個小作品之後，只要我寫入一些圖片很多的網站，例如2010年底至2011年初我所管理的網站--LED照明王--以及我的國中時代漫畫作品珍藏用的網站--真的好慢報--裡面都有大量照片和圖片，如此一來，我就可以改善blogger平台每次點擊圖片就會換頁的缺點，進而提供讀者一個更好的閱讀經驗。

　　然而世事難預料，正所謂「計畫趕不上變化、變化趕不上一通電話」！這個小作品的製作過程中，blogger平台開啟了光箱效果，也就是現在大家點擊圖片時會出現的畫面，這個光箱效果是blogger的程式設計師編修的，實用程度比我的小作品還要好上太多太多，不但會自動在畫面置中、縮放到最適當大小，還有點擊跳下一張和底部小圖索引，完全是一個專業的圖片展示台，效果甚至可以媲美網路漫畫平台。兩相比較之下，我的作品簡直就是個可笑的玩具！更何況我還沒有完成！！我的幼小的心靈被大環境無情地擊落。

　　幾天沉澱心情之後，我將小作品的呈現方式稍做修改，做成一個基本的導覽。這個導覽跟一般的網站導覽稍微不一樣，點擊不是換頁而是跳出圖像。這幾張圖像是我在社群網站上所使用的頭像，點擊圖像會引導使用者進入我的社群，點擊圖像以外的地方會停止展示，回復正常頁面，這一點跟光箱是一樣的。以下作品展示。

歡迎光臨我的網路社群

• plurk
• G+
• FB

---

跳出式圖像的原始碼分為三個部分：

• ⊕ HTML -- 結構部份
  <div style="display:none;" id="跳出式圖像" onclick="this.style.display='none';">
  <img id="圖像主題" onclick="document.location.href = urlForIMG;" /></div>
  
  　　建立一個名為"跳出式圖像"的區塊，點擊時會讓自己消失。區塊裡面建立一個名為"圖像主題"的圖像，不指定圖像來源，點擊時會將頁面的位置重設為urlForIMG這個變數。
• ⊕ CSS -- 樣式部份
  <style>
  #跳出式圖像 {
    text-align: center;
    position: fixed; top: 0px; left: 0px;
    width: 100%; height: 100%; z-index:1;
  }
  #圖像主題 {
    overflow: visible; position: relative; top: 80px;
  }
  </style>
  
  　　"跳出式圖像"的內容置中對齊，位置固定在畫面上，緊貼上方和左方，寬度和高度跟畫面一樣，z軸的位置設為1（一般部落格樣版大多沒有設定z-index，這個動作可以確保區塊顯示在其他網頁元素最上層）。"圖像主題"超出範圍還是顯示，位置為相對，距離上方80px。
• ⊕ JavaScript -- 動作部份
  <script>
  var urlForIMG;
  function showIMG(imgAnchor) {
    document.all.圖像主題.src = imgAnchor.href;
    document.all.圖像主題.style.display = '';
    document.all.跳出式圖像.style.display = '';
    urlForIMG = imgAnchor.rev;
  }
  var anc = document.getElementsByTagName('a');
  for (i=0;i<anc.length;i++) {
    var regexIMG = /<[^>]*>/ig;
    if (regexIMG.test(anc[i].innerHTML)) {
      anc[i].onclick = function (event) {showIMG(this);return false;};
      }
  }
  </script>
  
  　　保留一個變數叫urlForIMG。保留一個可以帶入imgAnchor變數的函式叫showIMG，執行的時候它會將"圖像主題"的圖像來源設定成imgAnchor的超連結，再讓"圖像主題"出現，也讓"跳出式圖像"出現，最後把imgAnchor的rev值放入urlForIMG變數中。（程式運作時，這裡的imgAnchor變數將會被帶入本文的超連結元素，也就是上面看到的plurk、G+和FB這三個超連結，rev值指定在超連結元素裡面，內容是相對應的社群網址。這兩類資料寫在本文裡面，做為要被JavaScript處理的原始資料，性質跟小程式不同，沒有放入原始碼當中。）
  　　接下來，開一個變數叫anc，放入文章中所有超連結元素，是一個集合。接下來檢查anc從頭到尾每一個項目，只要裡面含有元素的，就讓這個超連結點擊的時候啟動showIMG函式（這樣就會秀出圖片），另外停掉這個超連結的原本功能（這樣就不會換頁）。（因為在本文裡面plruk、G+和FB都被包裹在一個字體加粗的元素裡面，所以這三個超連結都會被JavaScript改成點擊的時候秀圖而不換頁。）跳出式圖像大功告成。