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

— Add-On để WorldWideScripts.net

Đăng ký vào nguồn cấp dữ liệu của chúng tôi để ở lại đến ngày!

Mới! Theo chúng tôi như bạn muốn nó!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Đây là một bản đồ hình ảnh html thiết kế dành cho các nhà phát triển web.

Công cụ này đã được phát triển bằng cách sử dụng vải HTML5, vì vậy việc sử dụng nó được giới hạn trong các trình duyệt hỗ trợ canvas, mà còn File API của:

IE10 +, FF3.6 +, FF14-, FF18 + (các FF15 có vấn đề với một số chức năng vải, Bug 787.623, sẽ được giải quyết trong FF18), Chrome6 +, Safari6 +, Opera11.1 +

Vì đây là một công cụ cho các nhà phát triển, tôi nghĩ rằng đây không phải là một hạn chế lớn, bởi vì tôi nghĩ rằng một nhà phát triển web có không có vấn đề để lựa chọn một trình duyệt thích hợp.

Tôi đã sử dụng FF14 để phát triển các công cụ, vì vậy đây là choise tốt nhất, nhưng công cụ này đã được thử nghiệm cũng trong Chrome22 và Opera12


Lưu ý: Các phiên bản của công cụ mà bạn có thể thấy trong các liên kết Live Preview, là một phiên bản giới hạn của công cụ. Với phiên bản này, bạn chỉ có thể tải một tập cụ thể của hình ảnh, được liệt kê trên trang chủ. Sau khi tải một hình ảnh, bạn có thể rút ra tất cả các hình dạng, nhưng chỉ có 6 hình dạng đầu tiên sẽ được tạo ra trong mã HTML. Sự hạn chế này không ngăn cản bạn để kiểm tra tất cả các chức năng của công cụ này.


Một bản đồ hình ảnh là gì?

Một bản đồ hình ảnh là một mã HTML mà làm cho các khu vực khác nhau người dùng có thể click của một hình ảnh. Các mã HTML bao gồm các bản đồ tag HTML, kết hợp với các từ khóa khu vực, cho phép bạn xác định các khu vực có hình dạng hình chữ nhật, đa giác và hình tròn.
Như một ví dụ, nếu bạn có hình ảnh image1.png trong trang HTML của bạn, bạn có thể viết đoạn code sau:

 <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> 

Như bạn thấy, bạn phải thiết lập các thuộc tính usemap trong thẻ img, mà sẽ có cùng giá trị của các thuộc tính tên trong thẻ bản đồ. Giữa <map></ map> bạn có thể định nghĩa như nhiều <diện tích> thẻ như bạn muốn, mỗi người đại diện cho một khu vực người dùng có thể click vào hình ảnh có liên quan. Mỗi khu vực phải có một thuộc tính hình dạng, có thể có một trong 3 giá trị: rect, poly vòng tròn. Hình dạng rect là hoàn toàn xác định bởi 2 điểm, một hình dạng nhiều được xác định bởi một chuỗi các điểm và một hình tròn được xác định bởi một điểm, mà đại diện cho trung tâm, và bán kính. Tất cả các điểm được xác định bởi một vài tọa độ, thể hiện ở các điểm ảnh, người thân vào góc cao bên trái của hình ảnh. Các thuộc tính hình dạng cũng có thể có "mặc định" giá trị, mà đề cập đến các phần của hình ảnh không được ánh xạ với bất kỳ hình dạng trước đó. Đưa vào tài khoản, thay vào đó, là thứ tự mà trong đó các hình dạng được xác định trong bản đồ là rất quan trọng: nếu bạn xác định "mặc định" hình dạng như hình đầu tiên trong bản đồ, nó sẽ ghi đè lên tất cả các hình tiếp theo, bởi vì "mặc định" hình đề cập đến toàn bộ hình ảnh. Điều này cũng đúng với các hình dạng mà chồng chéo nhau: bạn có thể xác định một hình dạng nhỏ thành hình lớn hơn, nhưng bạn phải xác định đầu tiên hình dạng nhỏ và sau đó là một lớn hơn. Nếu 2 hình dạng chia sẻ một phần của hình ảnh, hình dạng xác định trước tiên, thắng.

Nếu bạn muốn thiết lập bằng tay một bản đồ hình ảnh bạn phải biết tọa độ của tất cả các điểm cần thiết để xác định hình dạng khác nhau. Có lẽ đây không phải là một vấn đề lớn nếu bạn có vài khu vực để đồ, đặc biệt là nếu bạn có các khu vực hình tròn hoặc hình chữ nhật. Nhưng nếu bạn có một số lĩnh vực, với một hình đa giác, đặt chúng bằng tay không phải là một nhiệm vụ đơn giản.

Các công cụ hình ảnh mapper cho phép bạn vẽ hình như rect, poly,vòng tròn trên hình ảnh được chọn, sẽ được dịch tự động trong các mã HTML tương ứng mà làm cho các vùng của hình ảnh người dùng có thể click.

Sau khi vẽ hình vào hình ảnh nhất định, bạn có thể tạo ra các mã HTML đơn giản nhấp chuột vào một nút và các mã sẽ được displayied trong một khung văn bản. Bạn có thể sao chép mã HTML và sử dụng nó trong trang HTML của bạn (s). Bạn cũng có thể làm quá trình ngược lại: dán mã HTML trong khung văn bản, bạn có thể tải mã này chỉ đơn giản nhấp chuột vào một nút; này sẽ được dịch trong các hình dạng trên hình ảnh và bạn có thể thay đổi chúng, thêm hình dạng mới và tái tạo ra các mã HTML. Cơ chế ngược này rất hữu ích cho phép bạn lưu một trình lập bản đồ một phần và tiếp tục để bản đồ hình ảnh sau này. Nó cũng hữu ích để tinh chỉnh "bằng tay" hình dạng thiết kế / định vị: sau khi tạo ra các mã trong vùng văn bản, bạn có thể sửa đổi các tọa độ trong textarea trên bay và nạp lại nó.

Những đặc điểm chính:

  • Bạn có thể chọn một hình ảnh địa phương hoặc từ xa
  • Bạn có thể thiết lập kích thước hình ảnh mục tiêu: đó là những kích cỡ hình ảnh sẽ có trong trang HTML của bạn
  • Bạn có thể phóng to thu nhỏ hình ảnh trong bất cứ lúc nào và điều này sẽ không can thiệp với các tọa độ thực sẽ được tạo ra, mà chỉ phụ thuộc vào kích thước mục tiêu của hình ảnh. Các tính năng zoom chỉ hữu ích để giúp bạn vẽ các hình dạng.
  • Bạn có thể thiết lập một vài thông số cho mỗi hình dạng, chẳng hạn như các thuộc tính "href", các "alt" thuộc tính, các "id" và "lớp học" thuộc tính và cuối cùng là "mục tiêu" thuộc tính. Để thiết lập các tham số bạn có để chọn hình dạng: để chọn hình bạn phải chọn vào mũi tên trên cùng bên trái trên thanh công cụ và sau đó nhấp vào hình dạng.
  • Bạn có thể thiết lập một số thông số cho bản đồ: bản đồ "tên", url mặc định và mục tiêu.
  • Bạn có thể vẽ một hình dạng lựa chọn các hình dạng từ một thanh công cụ.
  • Để vẽ một hình dạng, sau khi chọn nó từ thanh công cụ, bạn có thể chỉ cần nhấp chuột vào hình ảnh, nơi bạn muốn bắt đầu hình thành.
  • Nếu hình dạng là một vòng tròn, điểm flirts là trung tâm: cách di chuyển chuột (nhấp chuột hay phát hành), bạn có thể nhìn thấy một vòng tròn theo con trỏ. Nhấp chuột một lần nữa sẽ ngừng vẽ những vòng tròn.
  • Nếu hình dạng là một rect. điểm đầu tiên là một trong những góc. Di chuyển chuột (nhấp chuột hay phát hành) sẽ vẽ một rect. Nhấp chuột một lần nữa sẽ ngừng vẽ.
  • Nếu hình dạng là một poly quá trình này là một chút khác nhau: mỗi cú nhấp chuột sẽ thiết lập một điểm; điểm hiện tại luôn luôn kết nối với một linh sam, làm poly luôn luôn là một hình khép kín; dừng lại để rút ra những poly (để thiết lập các điểm cuối cùng), bạn phải kích đúp chuột.
  • Đối với tất cả các hình dạng bạn cũng có thể dừng lại để vẽ chúng cách nhấp vào nút "stop" (mũi tên trên cùng bên trái trên thanh công cụ).
  • Bạn có thể thấy tọa độ chuột khi bạn di chuyển nó vào hình ảnh.
  • Bạn có thể sử dụng các đường viền màu xám-tan xung quanh hình ảnh để xác định tọa độ góc của tấm ảnh, vì vậy bạn có thể sử dụng biên giới vì nó là một phần của hình ảnh: như vậy, bạn có thể nhấp vào biên giới trong các bản vẽ hình dạng, jus như nó là một phần của hình ảnh. Ví dụ, nếu bạn nhấp chuột vào góc trên bên trái của biên giới, bạn sẽ thiết lập một điểm ở (0, 0) tọa độ. Nếu bạn nhấp vào trái biên giới, ở bất kỳ điểm nào, bạn sẽ thiết lập một điểm tại (0, y) tọa độ, vv
  • Bạn có thể chọn một hình dạng đã được rút ra và sửa đổi / thay đổi kích thước / gỡ bỏ nó. Để loại bỏ nó, bạn phải sử dụng các "cao su" trên thanh công cụ, sẽ xuất hiện như một cây bút chì chối chỉ chọn một hình dạng.
  • Bạn có thể chọn màu sắc của các đường viền của hình dạng từ một tập hợp của 5 màu (điều này không phải là một công cụ thiết kế, vì vậy tôi đã giới hạn số lượng màu sắc và bạn cũng không thể chọn một màu khác nhau cho mỗi hình dạng).
  • Bạn có thể nhấp vào nút "bản đồ", đó là hiển thị chỉ khi bạn chọn nút "stop" trên thanh công cụ và không có hình dạng được lựa chọn: nếu bạn có một số hình dạng được vẽ trên hình ảnh bạn sẽ thấy mã HTML trong một vùng văn bản, nếu bạn vẫn chưa rút ra một hình dạng bạn sẽ thấy một vùng văn bản trống, nhưng bạn có thể qua trong đó một số mã HTML và tải nó.
  • Nhấp vào nút "tải" (mà bạn có thể nhìn thấy sau khi nhấp vào nút "bản đồ"), mã HTML hiện trong khung văn bản sẽ được dịch theo hình dạng trên hình ảnh.

Bạn có thể tham khảo hướng dẫn hoàn chỉnh các công cụ tại liên kết sau: Hướng dẫn sử dụng trực tuyến

Nếu bạn có bất kỳ câu hỏi, chỉ để lại một bình luận hoặc thả cho tôi một email!


Tải về
Các thành phần khác trong thể loại nàyTất cả các thành phần của tác giả này
Ý kiếnCâu hỏi thường gặp và câu trả lời

Tài sản

Tạo:
10 Tháng Mười 12

Cập nhật cuối cùng:
N / A

Độ phân giải cao:
Không

Các trình duyệt tương thích:
Firefox, Opera, Chrome

Bao gồm các tập tin:
JavaScript JS, HTML, CSS

Phiên bản phần mềm:
HTML5

Từ khóa

Thương mại điện tử, Thương mại điện tử, Tất cả cá, c mục, ứng dụng, khu vực, tranh sơn dầu, vò, ng trò, n, phối hợp, html5, hì, nh ảnh, bản đồ, mapper, nhiều, rect, hì, nh dá, ng, mục tiê, u, dụng cụ, thu phó, ng