《Disney +》 迪士尼、Marvel、彼思、星球大戰…  P&D龍族拼圖 2020東京奧運活動 依日本隊獎牌數送魔法石!   「Indie World 2021.4.15」影片公開!發表內容統整在這裡!   《Destruction AllStars》下一波精彩內容: 指定賽事、挑戰系列賽等更新   在潛行動作沙盒遊戲《Arashi: Castles of Sin》裡化身忍者   《猛毒2:血蜘蛛》——標誌性共生體即將真實現身   超級機械人大戰DD × 超級機械人大戰30!各個主角將於遊戲中參戰!   《刺客教條:奧德賽》與《維京紀元》在「跨界故事」中擦出火花   【開箱】這做工也太精美!「尼爾:人工生命 ver.1.22474487139…」與「尼爾:自動人形」原創玻璃杯 

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:教學網頁嵌入的照片互動圖解

喜歡這篇文章嗎?歡迎追蹤我的FacebookTwitterGoogle+,獲得更多有趣、實用的數位科技消息,更歡迎直接透過社群聯繫我。

Source:: playpcesor.com

隨機商業新聞

Disney Plus