GIMP是一套免費的，但功能強大的圖像處理軟體，先到官網下載最新版本回來安裝，拜歐這裡是使用免安裝版本，版本是2.8.8。
安裝完成後，就直接點按【File】→【Open】開啟要製作地圖的圖像。
再來點按【Filters】→【Web】→【Image Map】開啟製作圖像地圖的視窗。開啟的選單路徑可能依版本不同，在不同的地方。
視窗開啟後，可以看到在視窗的左邊，有三個常見於製作影像地圖軟體的圖示：
在這個範例中，拜歐使用最上方的「矩形」圖示，把ASK這個logo給標示出來，當開始標示時，滑鼠會變成如下列紅框中的十字圖示，表示框出矩形區域的起點：
當框好需要的區域後，再點按滑鼠左鍵一下，就會完成矩形區域的選取，在原梧的視窗會顯示出所選取的區域範圍：
上列中，「URL to activate when this area is clicked: (required)」是一個必填欄位，也就是當點按到這一個區域時，所要前往的網址，或者可以填入「#」，之後再使用JavaScript來動態設定。這裡拜歐填入ask.com的網址。
另外在「ALT Text」中，可以填入當使用者將滑鼠移到這塊區域時，所要顯示的提示。按下「OK」，即可完成第一設定。這時回到圖像地圖的視窗時，會發現右邊出現了剛才的第一個設定，這時可以點按中間的「紙筆」圖示來做編輯，或點按「垃圾桶」圖示來刪除圖像區域的設定：
做到這裡，其實已經很接近拜歐想要的東西： 包在
map標籤中的area標籤的coords屬性的值，在Image Map的視窗中，點按【View】→【Source...】，就會跑出一個 View Source 的小視窗，其中就是上列所述的 html 字段。
其中html字段如下：
在上列的 html 中，
area標籤的shape屬性就是表示剛才選取區域時，使用矩形的結果，若是使用圓形去選取，就會是circle，若使用多邊形去選取區域，值就是poly，而coords的四個數字，就是代表這個矩形的左上角的x、y座標與右下角的x、y座標。使用圓形的步驟和矩形相同，若使用多邊形時，要注意的是，點滑鼠左鍵一下，就會連成一個邊，若要回覆，就點按滑鼠右鍵，若要完成選取，就點滑鼠左鍵兩下。
參考來源：
