網頁圖檔管理畫面

在討論區看到一篇討論圖檔管理網頁的作法,因為討論區不方便貼圖,就回到 MSN Spaces 貼圖,順便描述一下。
這個網頁是以目錄為單位來管理圖檔,把目錄內符合 png/gif/jpg 三種格式的圖檔都顯示在螢幕上,考慮到縮圖的變化及檔案空間的使用,不直接產生縮圖,而直接使用 vml 語法來放大縮小。
點選圖片後,利用 vml 來讓圖片符合視窗大小最適化顯示,亦即當 IE 視窗放大縮小時,圖片仍能掃描 IE 視窗大小來做不超出螢幕的置中最大顯示,若需瀏覽原圖時,才需要在圖片顯示視窗上點選原圖。
此作法的優勢是永遠只傳原始圖檔,無需針對不同可視大小來創造不同尺寸的圖檔,而且改變大小時,無須重讀圖片,因為圖片已經在 client 端了。
適用範圍偏向 png/gif/wmf/emf 等非照片之原圖,並非是 jpg 不適用,而是數位照片可能原圖高達 2 ~ 3 MB 以上,這種情況則需考慮產生 1024 x 768 以下尺吋的縮圖在螢幕顯示使用,來降低初始流量。
新增檔案則是利用 Script 事件,當使用者完成一檔案瀏覽動作後,自動新增一列空白列,供使用者選取下一圖檔,以此方式來讓使用者可完成多檔同時上傳的動作。
關於 vml 語法的使用,請參考:

鄭子璉,「華陀問診 如何在網頁上更平滑的縮放圖片」,RUN!PC,第 129 期,台北,第 40 – 44 頁,民國 93 年 10 月。


圖檔管理列表

圖檔管理列表

圖檔預覽顯示

圖檔預覽顯示

Categories: 決策支援系統 | 1 則迴響

文章導覽

One thought on “網頁圖檔管理畫面

  1. 子璉

    此網頁所需的 Server 及 Client 原始碼回覆在下面那篇討論中:
    http://forums.microsoft.com/MSDN-CHT/ShowPost.aspx?PostID=728830&SiteID=14
    請點選該篇參閱。

    喜歡

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

在WordPress.com寫網誌.

%d 位部落客按了讚: