WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— 添加到WorldWideScripts.net

訂閱我們的飼料,以保持最新

新!跟隨我們,你想要它


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

這是一個HTML圖像映射專為Web開發人員

該工具已經使用HTML5的畫布,所以它的使用僅限於支持canvas瀏覽器,同時也是文件的API:

IE10 +,FF3.6 +,FF14-,FF18 +(該FF15有問題,有些畫布功能,錯誤787623,將在FF18得到解決),Chrome6 +,Safari6 +,Opera11.1 +

由於這是開發人員的工具,我認為這不是一個很大的限制,因為我想,一個web開發人員沒有問題,選擇一個合適的瀏覽器。

我已經使用FF14開發工具,所以這是最好的choise,但該工具也已測試了Chrome22和Opera12


注意 您可以在實時預覽鏈接來查看該工具的版本,是工具的有限版本。 在這個版本中,你只能加載一組特定的圖像,在主頁上列出。 加載圖像後,你可以畫出所有的形狀,但只有前6形狀將在HTML代碼來生成。 這一限制並不妨礙你來測試工具的所有功能。


什麼是影像地圖?

圖像映射是一個HTML代碼,使用戶可以點擊不同的圖像區域。 在HTML代碼包含地圖 HTML標記的,與地區的標籤,這讓您與矩形,多邊形和圓形定義區域相結合。
舉個例子,如果你有image1.png形象在你的HTML頁面,你可以寫下面的代碼:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

正如你所看到的,你必須設置USEMAP屬性的img標籤 ,將在地圖標記的 name屬性的值相同。 在<圖>和</圖>之間,你可以根據需要定義盡可能多的<區>標籤 ,每一個代表相關圖像上的用戶可點擊區域。 每個區域都必須有一個形狀屬性 ,這可以具有3個值中的一個: 矩形多邊形和圓形。 的矩形形狀是由2點完全確定,因此聚形狀由點的序列定義的和一個圓形狀由一個點,它表示的中心,和一個半徑限定。 所有的點由一對坐標定義的,表示在像素,親戚的圖像的左上角。 形狀屬性也可以具有“默認”值,即參考圖像的未映射與前述任何形狀的零件。 考慮到,相反,在其形狀在圖中定義的順序是非常重要的:如果你定義的“默認”的形狀,在地圖中第一個形狀,它將覆蓋所有後續的形狀,因為“默認”形狀是指整個圖像。 這是真實的也有相互重疊的形狀:您可以定義一個小形成一個更大的形狀,但你必須先確定小的形狀,然後在更大的一個。 如果2形狀共享圖像的一部分,第一限定的形狀,勝。

如果你想手動設置圖像映射,你必須知道所有定義不同的形狀所需要的點的坐標。 也許這不是,如果你有幾個方面映射一個很大的問題,特別是如果你有圓形或矩形區域。 但是,如果你有幾個方面,一個多邊形,手動設置不是一個簡單的任務。

圖像映射工具允許您繪製圖形,如矩形,保利,以及所選擇的圖像上 ,會自動在相應的HTML代碼,使圖像的用戶可點擊的區域進行翻譯。

繪製形狀給定的圖像後,可以生成HTML代碼,只需點擊一個按鈕,代碼將在一個textarea來displayied。 您可以複製的HTML代碼,並用它在你的HTML網頁。 你也可以做相反的過程:粘貼在textarea的HTML代碼,就可以加載這些代碼,只需點擊一個按鈕; 這將被翻譯在圖像上的形狀和可以修改它們,添加新的形狀和重新生成的HTML代碼。 這種反向的機制是非常有用的,讓您保存部分映射過程,並繼續到圖像後映射。 這也是有益的改進“手動”的造型設計/定位:生成代碼的文本區域後,你可以修改文本區域的坐標上飛,並重新加載它。

主要特點:

  • 您可以選擇本地或遠程圖像
  • 您可以設置目標圖像大小:這些尺寸的圖像會在你的HTML頁面
  • 可以在與在任何時刻,在圖像放大,這將不會與將要產生的實際坐標,僅依賴圖像的目標尺寸干擾。 縮放功能僅用於幫助您繪製圖形。
  • 您可以設置幾個參數,每個形狀,如“href”屬性,在“alt”屬性,“標識”和“類”的屬性和最後的“目標”屬性。 要設置你必須選擇形狀參數:選擇一個形狀,你必須在工具欄中選擇左上角的箭頭,然後單擊形狀。
  • 您可以設置一些參數地圖:地圖上“名”,默認URL和目標。
  • 您可以繪製一個形狀從工具欄中選擇形狀。
  • 要繪製形狀,在工具欄中選擇它後,你可以簡單地用鼠標點擊圖像,你要開始的形狀上。
  • 如果形狀為圓形,該firts點為中心:移動鼠標(點擊或釋放),你可以看到光標跟隨一個圓。 再次單擊鼠標會停止繪製圓。
  • 如果形狀是一個矩形。 第一點是所述角中的一個。 移動鼠標(點擊或釋放)將繪製一個矩形。 再次單擊鼠標會停止繪製。
  • 如果形狀是聚過程稍有不同:鼠標的每一次點擊都會設置一個點; 當前點始終與冷杉1連接,使得聚總是閉合的形狀; 停止繪製聚(設置最後一個點),您必須雙擊鼠標。
  • 對於所有的形狀,你也可以停下來吸引他們點擊“停止”按鈕(工具欄的左上角的箭頭)。
  • 你可以看到鼠標的坐標,當您在圖像上移動。
  • 您可以使用灰色虛線邊框的圖像周圍,以確定圖像的邊​​緣坐標,這樣你就可以使用邊框,因為它是圖像的一部分:這樣,可以在形狀繪製過程中單擊邊框,強制,因為它是圖像的一部分。 例如,如果你點擊邊框的左上角,您將設置一個點(0,0)坐標。 如果您點擊左側邊界,在任何時候,您將設置一個點(0,y)坐標等。
  • 您可以選擇一個已經繪製形狀和修改/調整/刪除它。 要刪除它,你必須使用工具欄中的“橡皮”,即會出現一個掉頭向下鉛筆只能選擇一個形狀。
  • 您可以選擇從一組5種顏色的形狀輪廓的顏色(這不是一個設計工具,所以我有限的色數,你也不能選擇不同的顏色為每個形狀)。
  • 您可以點擊“地圖”按鈕,只有當你選擇工具欄上的“停止”按鈕,並沒有形狀的選擇是可見:如果你有一些形狀繪製的圖像上,你會看到HTML代碼的文本區域,如果你還沒有繪製的形狀,你會看到一個空的textarea的,但你在它的一些HTML代碼可以過去並加載它。
  • 點擊“加載”按鈕(即你只能點擊“地圖”按鈕後見),存在於textarea的HTML代碼將被翻譯成形狀的圖像。

您可以諮詢在下面的鏈接工具的完全手冊: 使用手冊

如果您有任何問題,只是發表評論或給我發電子郵件!


下載
此類別中的其他組成部分這個作者的所有組件
評論常見問題和答案

屬性

創建:
10 10月12日

最後更新:
N / A

高分辨率:

兼容的瀏覽器:
火狐,歌劇,鉻

包括的文件:
JS的JavaScript,HTML,CSS

軟件版本:
HTML5

關鍵字

電子商務, 電子商務, 所有項目, 應用程序, 區域, 帆布, 圈, 協調, HTML5, 圖像, 地圖, 映射器, 聚, RECT, 形狀, 目標, 工具, 放大