Amazon Ads

2013年12月4日 星期三

【筆記】使用GIMP做圖片地圖超連結 (image map)

拜歐很早之前就曉得在網頁中可以用圖像來做圖像地圖 (image map),但真正有機會實作,最近真是生平第一次,而之前知道的工具有Dreamwaver,但這工具是需要版權的,所以就google找了一下,也可以使用GIMP (GNU Image Manipulation Program) 來做。

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字段如下:







ASK com


在上列的 html 中,area標籤的shape屬性就是表示剛才選取區域時,使用矩形的結果,若是使用圓形去選取,就會是circle,若使用多邊形去選取區域,值就是poly,而coords的四個數字,就是代表這個矩形的左上角的x、y座標與右下角的x、y座標。

使用圓形的步驟和矩形相同,若使用多邊形時,要注意的是,點滑鼠左鍵一下,就會連成一個邊,若要回覆,就點按滑鼠右鍵,若要完成選取,就點滑鼠左鍵兩下

參考來源: