Pictogon 輕鬆製作 Image Map:教學網頁嵌入的照片互動圖解



「 Image Map 」(影像地圖),並不一定真的是地圖,而是指一種可以讓網頁圖片設計出互動圖解的 HTML 技巧。例如一幅歷史人物圖片,滑鼠移動到每個人物上,就能浮現這個人物的簡介,點擊一下還能打開這個人的百科。

製作「 Image Map 」(影像地圖)是很傳統的 HTML 語法,但是如果對不熟悉網頁程式碼的人,又想設計出各式各樣的照片互動圖解,例如圈出圖片裡各種區塊形狀,插入各種圖示解說,設計超連結等等,有沒有簡單的方法呢?

這時候,或許可以試試看「 Pictogon 」這個線上 Image Map 製作工具,讓不懂程式語法的朋友,也能製作出厲害的網頁圖片互動圖解

他製作出來的成果如下圖,你可以把滑鼠游標移動上去,查看互動的資訊。





「 Pictogon 」免費帳戶可以保留三個互動圖解照片。或是邀請朋友可以最多增加到十組。需要更多互動圖解,就要付費使用。




利用「 Pictogon 」的 Image Map 功能,我們可以製作網頁照片中景物說明的互動標示,或是真的在地圖照片裡畫出一個一個區域,滑鼠移動上去就會浮現動態說明。




製作方式非常簡單,首先把網頁圖片的連結,輸入到「 Pictogon 」開始編輯。




接著利用多邊形線條工具,圈出照片裡想要插入解說的部分。




然後在左方,輸入解說方塊的標題、內容、超連結,並且可以設計點擊時、游標放在上面時,或是預設要顯示什麼樣態。




除了劃出多邊形的解說區域,也可以插入各種內建的圖示說明。




最後製作完成,按下儲存,就能獲得「嵌入網頁」的語法,將語法貼上網頁想要展示圖片的位置即可。




如果你的產品行銷網頁,想要製作這樣的產品照片圖說。或者你的歷史、地理、旅遊資訊網頁,要做照片的資訊百科教學。但可以試試看 Image Map 的設計,或是利用「 Pictogon 」這類工具。

而如果你對這類教學解說資源有興趣,還可以參考:「免費台灣地圖下載 Free Vector Maps 有世界各國地圖向量圖檔 」、「輕鬆自製會說重點的簡報地圖!台灣與世界地圖圖表免費產生器 」,或是「5個台灣老照片圖庫,歷史教學研究必備的免費歷史照片資料庫 」。

「 Pictogon 」線上工具


歡迎社群分享。但全文轉載請來信詢問,禁止修改上述內文,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang 異塵行者,及附上原文連結:Pictogon 輕鬆製作 Image Map:教學網頁嵌入的照片互動圖解

留言

  1. QQ 免費3個 可以編輯文字嗎 QQ? 不知道為何 我用chrome,只能框綠色,但無法打字 @@?

    回覆刪除
    回覆
    1. 可以喔,我的範例就是這樣做出來的

      刪除
    2. 我也是無法編輯文字~用狐狸也是QQ

      刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google Maps 我的地圖完全教學!規劃自助旅行攻略

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google 表單的 10 個專業問卷調查設計秘密教學

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

活用 ChatGPT Reply 新功能 3 種方法,對話再亂再長也能準確修改

Google 表單自動關閉回覆教學:時間人數到達就過期