PS Zoomify 應用在 html 中

Zoomify是一家商業公司，利用網路串流技術，

用Flash方式，將大圖切割成數層不同大小的影像，

使得影像的呈現不需要全景讀取，所以就不需遷就網路傳輸效能而縮小影像尺寸。

在網路上預覽影像時，可以自動縮放或平移的特效，

讓瀏覽者看的更仔細，而且是免費的功能,

在 Photoshop 中也有這個指令可用哦！

本節範例檔https://95875bafbd0e40d645e4201e9ba07f5e61b0712b.googledrive.com/host/0B8sgsIaD383Wajc1MUxlRFNsQjg/map.html
首先用photoshop 開啟圖片影像 - 中興新村地圖

檢視一下影像尺寸 (影像 -> 影像尺寸)

        

寬度 3200px, 高度 1350px , 是張很大的影像, 

        

我們就用 zoomify 來顯示無損於本尊的大圖像囉! 

1. 檔案 -> 轉存 -> Zoomify...

       

   這次我們只做下方三個選項的設定

      

   1. 資料夾-輸出完成檔的位置,

       包含一個 html 文件和置於產生html 所需的資料的置放位置。

   2. 基本名稱 - (英文字母)產生的 html 名稱。

   3. 瀏覽器選項 - 輸出的視窗尺寸

   4. 完成後, 在瀏覽器預覽, 可看到資料夾和基本名稱的結果

      

      a. 拖曳拉桿對圖面做縮放 (圖面上連擊二下, 也可直接放大)

      b. 移動位置 (圖面上手形工具也可拖曳移動)

      c. 顯示完整圖面

       

2. 到資料夾位置, 自動產生 map_img資料夾和  map.html檔案

    1. map.html 是剛才顯示的檔案, 而 map_img 則放置了產生 html 所需的資料

      

    2. map_jmg 資料夾內有個 swf和xml 的檔案, 和一個放置圖片的 TileGroup0

      

    3.  TileGroup0 資料夾內, 放置了被拆成不同比例的分解圖

      

這麼簡單就完成了, 好像很難的工程了!

其實我們也是摸黑進行, 只是執行個指令, 就完成了, 

至於這中間做了什麼工, 我也莫宰羊, 

這個年代, 難的事就留給聰明的人去做,

我們一般人, 會執行就好了!

現在再用另一個範本轉一次 zoomify,

這次選用有導覽器的 Zoomify (顏色皆可)

      

基本名稱 : map2

      

map2.html 在左上則會有導覽器顯視目前視窗, 在全景圖的位置。

      

現在要將做出來的 object 放置到我們的網頁中呢?

1. 將產生的 map.html 和 map_img 資料夾複製至 網站的資料夾中

   (網站為 zoomify_test)

      

2. 開啟 dreamweaver 到 zoomify_test 網站

   確認資料夾有 map.html 和 map_img 資料夾

     

3. 開啟 map.html, 複製 object 標籤

     

4. 新增 html , 貼在 body 中的所需位置中, 就完成了!!