DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：最近在做一個原型的時候用到錨點跳轉與Title提示功能，同事看到HTML之後問我這個是怎麼實現的；昨天又看到一篇文章舉了個注冊表單中的Title 提示示例，問這個是如何實現的，我才發現原來很多人都忽視了axure中一個很常用的組件——圖片/圖像映射區域（image map region

    最近在做一個原型的時候用到錨點跳轉與Title提示功能，同事看到HTML之後問我這個是怎麼實現的；昨天又看到一篇文章舉了個注冊表單中的Title 提示示例，問這個是如何實現的，我才發現原來很多人都忽視了axure中一個很常用的組件——圖片/圖像映射區域（image map region）。
       組件名稱：image map region，圖片/圖像映射區域
       組件介紹：在web頁面中制造一片不可見的區域，相當於圖片的熱區，從而添加說明與互動。在現實的網頁中經常會有一張大圖中有某個區域是觸發按鈕，而圖像映射區就可以用來說明這個區域的的功能和互動內容。
      可實現功能：鏈接的Title提示、圖片的Alt提示、錨點跳轉。類動態面板功能。                                      
       如上圖所示，選擇圖像映射區域組件，覆蓋在要映射的圖像上方，右鍵點擊“編輯工具提示”，輸入Title的文本內容，OK。
       其中，是否給該控件加注標簽為可選項，如果不加注標簽，則系統默認名稱為“unlabeled”，不過，如果你需要使用錨點跳轉功能的話則需要加注標簽，中英文皆可。因為你要指定錨點的跳轉位置，這個位置的判定就是以該標簽的名稱為准的。
        PS：ALt和Title提示這個功能也可以用動態面板來實現，不過比較笨重，需要設置mouse on和mouse out兩個交互動作。
        2、同一頁面內錨點跳轉

       1、Title提示和Alt提示功能實現
       鏈接的Title提示和圖片的Alt提示功能相對比較簡單，其實只要簡單說一下大家就都能明白了，只是平時沒有注意罷了。

      如上圖所示，先在要加入錨點的地方添加一個圖像映射區域（操作方法如例1），這個圖像映射區域必須要加注標簽；在要實現跳轉的鏈接上加到交互動作，動作選 擇：滾動到圖片映射區域；然後選擇你要跳到的錨點位置，在下拉菜單中選擇你剛才加注的那個標簽名稱；可以考慮選擇滾動的方式；OK。
     其中，必須要對圖像映射區域加注標簽；頁面的長度一定要足夠錨點跳轉，如果頁面不夠長他跳了你也看不到。
     3、不同頁面之間的錨點跳轉

        如上圖所示，這裡包含了2個方面的交互：A頁面的組件a的交互、B頁面（跳轉到的頁面）的頁面交互。這個過程中我們需要借助一個中間變量（新增的變量1）。
        點擊線框圖，管理變量，新增一個變量（例如1）——給錨點鏈接添加交互屬性，也就是在離開頁面A的時候需要先給變量賦值——在跳轉到的頁面（B）中添加頁面交互（在OnPageLoad中添加）：滾動到圖片映射區域【注意，不是組件交互而是頁面交互！】，OK。
       這個過程的流程是這樣的：點擊鏈接a的時候也帶入了一個變量1，當a動作完成後，如果在B頁面還存在滿足變量1的交互動作則繼續執行，滾動到圖像映射區域。
       4、不同頁面之間的切換層狀態錨點跳轉
       這個需求是這樣的，點擊頁面A中的鏈接a跳轉到頁面B中Tab模塊T中的第二個tab 2中。
       實際實現原理還是一樣的，只不過是在對頁面B的頁面交互條件中再添加一個“設置動態面板狀態跳轉”就可以了，此時的條件變成同時滿足：變量值為1 and 設置動態面板狀態轉換到T的tab2 and 滾動到圖片映射區域。

      PS：道理很簡單所以就木有給出原型實例。我的axure使用的是5.6的漢化版本，漢化版本情況可以看這裡。