2009-12-08 32 views
7

我想添加自動區域高亮顯示到我的網頁上的圖像地圖。我發現mapper.js庫對於實現這一點非常有用,但是在區域地圖上創建x,y圖非常耗時。圖像地圖的繪圖點

有沒有一種快速創建不規則多邊形邊界座標的方法,例如可以在區域地圖上找到?

編輯
有一定的辦法可以做到這一點。我在Windows PC上安裝了Fireworks 8以及photoshop CS3,但我對Fireworks更加熟悉。

如果我創建一個選取框,我可以右鍵點擊>修改選取框>轉換爲路徑。這會創建一個有幾個點的路徑,但我不知道如何進入下一步,即提取這些點的座標。

我試過插入一個熱點,多邊形切片,然後導出到「HTML和圖像」。這兩個給我方形熱點,而不是多邊形。我也試過右鍵點擊路徑,然後點擊編輯>複製路徑輪廓,以及編輯>複製HTML代碼。也不要給我多邊形的座標。

我只能得到一個切片的多邊形座標。有沒有可能將路徑轉換爲Fireworks 8中的切片?

回答

7

煙花8:

1)用魔術創建選取框魔杖&選框工具。

2)右鍵點擊>修改選取框>轉換爲路徑

3)右鍵單擊路徑,並選擇 「插入熱點」(或按Ctrl + U)

4)選擇File> Export

5)選擇「保存類型」的「HTML和圖像」

+0

謝謝。這是完美的。 – Joshua 2009-12-21 20:40:38

7

Gimp優惠a plugin/filter called Gimp image map有一個很好的界面來幫助創建一個圖像映射。我認爲它會提供你正在尋找的功能。選擇Filters -> Web -> Image Map...,彈出對話框 Gimp Image Map filter

一旦你的圖像映射對話框打開,您可以創建多邊形區域,以你的心臟的喜悅: Polygon area creator

您可以創建和定製領域,你喜歡修改鏈接,替代文字,框架,多邊形本身或甚至設置JavaScript事件。

alt text

設置完畢後,保存它,你就可以。如果你喜歡留在Adobe的陣營使用,只保存在你的HTML

<img src="us_map.gif" width="771" height="448" border="0" usemap="#map" /> 

<map name="map"> 
<!-- #$-:Image map file created by GIMP Image Map plug-in --> 
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> 
<!-- #$-:Please do not edit lines starting with "#$" --> 
<!-- #$VERSION:2.3 --> 
<!-- #$AUTHOR:Colin Harrington --> 
<area shape="poly" coords="149,292,254,332,308,41,262,33,232,27,169,14,120,9,102,52,92,190" alt="West Coast" href="wc.html" /> 
<area shape="poly" coords="474,267,522,368,574,62,465,17,422,19,326,51,284,161,293,224,322,250,363,219,419,222" alt="Midwest" href="mw.html" /> 
<area shape="poly" coords="634,58,583,74,527,360,670,419,757,180,770,65,770,24,705,10,735,29" alt="East Coast" href="ec.html" /> 
<area shape="poly" coords="380,251,379,285,458,300,464,363,413,426,330,373,287,317,335,323,340,250" alt="Texas" href="tx.html" /> 
</map> 
+1

「您可以創建多邊形區域以滿足您的心情」。你的意思是手動嗎?這篇文章的要點是我正在尋找比放大點擊三四百次來創建特定多邊形區域更自動化的東西。 Fireworks和Photoshop都可以手動繪製切片(或多邊形區域)。 – Joshua 2009-12-20 08:47:03

+0

根據你的問題,你所尋找的自動化水平對我而言並不清楚。 GUI比編輯HTML x/y點要容易得多:-) 直到Fireworks和Photoshop都能像Gimp一樣創建圖像映射之後,我才意識到這一點。 這聽起來像你真正想要的是能夠使用魔棒工具來創建路徑,然後導出相應的圖像映射的HTML?它是否正確? – 2009-12-21 04:05:36

+1

這是垃圾,對這個主題的每一次搜索都會返回像這樣的結果,如何手動創建圖像映射,這是完全的,完全廢話,浪費時間做類似的事情時,應該很簡單,基於簡單地使用圖像蒙版(你想要的區域是黑色或白色,其他區域相反),因爲這些蒙版可以很容易地在任何圖形程序中創建,然後疊加在圖像上用作地圖(將不透明度設置爲0,對用戶來說) – Rick 2010-07-25 05:05:40

2

這是一個簡單易用的Web應用程序,用於創建圖像映射。這將節省您必須處理額外的程序(DreamWeaver,PhotoShop,Gimp等)。

http://www.image-mapper.com/

2

,似乎其他的答案是如何做手工(不回答這個問題的話)..因爲這個職位在谷歌搜索結果的這個話題出現時,我與一些信息更新我已經發現,至少對如何做到這一點以自動方式起點:

承諾,我期待到PHP的一個:http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646

我發現其他資源:

http://marakana.com/blog/examples/php-image-filters.html

http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html

http://en.wikipedia.org/wiki/Canny_edge_detector

基本上,尋找像「圖像邊緣檢測」和這種性質的東西的關鍵詞似乎導致更相關的結果,我仍然在尋找一個我可以使用但我感到有點驚訝,許多人似乎認爲這應該是手動完成的,因爲編程方式會更有效。

+0

不錯的資源。我不會經常訪問php陣營,但希望額外的鏈接可以幫助別人。 – Joshua 2010-10-14 13:11:45

3

這是一個沮喪的人期待從地圖圖像自動生成座標。

用photoshop打開你的地圖。 使用魔術棒選擇圖像邊緣 轉換選取框到路徑 出口這條路到Illustrator 打開文件插畫 「另存爲...」 SVG文件(注意:不是svgcompressed) 在選項菜單選擇'鏈接' 點擊保存

在文本編輯器中打開你的.svg文件,你將得到你的座標。