步驟1：

如果沒有圖像，創(chuàng)建圖像映射將非常困難。因此，您要做的第一件事是從interwebz中獲取一個，或者從頭開始創(chuàng)建一個（使用GIMP，obvs）。由于編輯和創(chuàng)建圖像可能應(yīng)該是它自己的教程，因此我們假設(shè)您已經(jīng)有要使用的圖像并且可以從那里去（但是如果您沒有圖像，并且可以訪問Visio之類的東西，則制作圖像很簡單）

步驟2：步驟2：收集鏈接

對我來說，選擇/創(chuàng)建圖像后的下一個邏輯步驟是繼續(xù)并收集您將要使用的所有鏈接。此代碼是您鏈接到的內(nèi)部頁面或網(wǎng)絡(luò)上任何地方的地址。在本練習(xí)中，我們將使用五個網(wǎng)址：

https://www.instructables.com

您當(dāng)前正在查看的站點(diǎn)，杜。

http://www.flickr.com

一個很棒的照片分享網(wǎng)站。存在于Instagram之前，回到Y(jié)ahoo！還是一件事。

http://www.lowes.com

The Home Improvement Company。

http://www.mjcpl.org/

我的本地圖書館。

https：//www.facebook.com

那個家伙從那個家伙那里竊取了這個想法的網(wǎng)站。

第3步：創(chuàng)建地圖

此處，我們將在GIMP中使用一種稱為“過濾器”的特殊工具。過濾器使您無需做大量手工工作即可整體上修改圖像。您可以使用濾鏡添加JJ鏡頭光暈艾布拉姆斯（Abrams），在文本上創(chuàng)建浮雕外觀或添加陰影以創(chuàng)建圖像的深度感。這些是可以做什么的非常簡單的示例，但是對于使用這種類型的軟件獲得的更多經(jīng)驗(yàn)的人，您將學(xué)到更多更強(qiáng)大的功能（我只是新手。專業(yè)人士可以做的事情會使您的頭部旋轉(zhuǎn)）。單擊以使用過濾器后，將打開一個新窗口，您將在其中實(shí)際創(chuàng)建地圖。

步驟4：調(diào)整形狀！

現(xiàn)在您在圖像映射窗口中，將創(chuàng)建將成為可單擊鏈接的區(qū)域。由于我們使用的是帶有圓形終端的輻條貼圖，因此使用圓形工具最有意義。如果您使用的是不規(guī)則形狀，則應(yīng)使用多邊形工具，該工具將允許您沿著形狀的邊界創(chuàng)建許多不同的點(diǎn)（#ProTip：在邊界上進(jìn)行邊界瀏覽后，雙擊它，它將停止嘗試添加新點(diǎn)）。選擇要鏈接的區(qū)域后，將彈出一個新窗口，您將在其中輸入您的網(wǎng)址。我建議直接從您的地址欄中進(jìn)行復(fù)制和粘貼，以免造成他人輸入錯誤的鏈接或網(wǎng)站錯誤。輸入此內(nèi)容后，單擊“應(yīng)用”并繼續(xù)到下一個鏈接。完成每個區(qū)域后，您會在屏幕右側(cè)的欄中看到它。

第5步：保存或消失！

我無法強(qiáng)調(diào)經(jīng)常儲蓄的重要性。其實(shí)我可以。我做了三遍嘗試來創(chuàng)建此地圖，因?yàn)槲胰槎荚噲D在不保存的情況下完成整個操作，或者筆記本電腦死了，我不小心合上了窗戶，或者其他原因?qū)е挛沂チ怂泄ぷ?。救。通常?/p>

GIMP的文件擴(kuò)展名默認(rèn)為.map，這沒關(guān)系。我們將在一分鐘內(nèi)進(jìn)行更改，但請繼續(xù)保存為.map。

步驟6：兩只手，手電筒和區(qū)域地圖

保存.map文件后，找到保存文件的位置，并將擴(kuò)展名從.map更改為。 HTML。您會收到一條警告消息，說它可能會弄亂某些東西，但是沒關(guān)系。相信我。更改擴(kuò)展名后，使用記事本打開文件，您將看到（幾乎）成品的源代碼。 new.html文件將充當(dāng)將其放置在圖像上的模式，因此我們需要對代碼進(jìn)行一些更改。

我在代碼中突出顯示的區(qū)域需要更改為源代碼圖片的位置；即您托管文件的位置。這些信息很容易獲得。將文件上傳到您想要的任何位置，然后在該文件上單擊鼠標(biāo)右鍵，然后選擇“復(fù)制LinkAddress”（或與瀏覽器等效的選項(xiàng)，我使用Chrome）。更改代碼并上傳圖像后，您只需要復(fù)制.html文件中的所有HTML代碼并將其粘貼到Wiki，博客等中即可。輕松實(shí)現(xiàn)！

第7步：最終產(chǎn)品

責(zé)任編輯：wv