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 ke WorldWideScripts.net

@id1wwsBerlangganan feed kami untuk tetap up to date!

Baru ! Ikuti kami seperti yang Anda inginkan!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ini adalah pemetaan gambar html dirancang untuk pengembang web.

Alat ini telah dikembangkan menggunakan kanvas HTML5, sehingga penggunaannya terbatas pada browser yang mendukung kanvas, tetapi juga File API:

IE10 +, FF3.6 +, FF14-, FF18 + (yang FF15 memiliki masalah dengan beberapa fungsi kanvas, Bug 787.623, yang akan diselesaikan di FF18), Chrome6 +, Safari6 +, Opera11.1 +

Karena ini adalah alat untuk pengembang, saya berpikir bahwa ini bukan pembatasan besar, karena saya kira bahwa pengembang web tidak memiliki masalah untuk memilih browser yang tepat.

Saya telah menggunakan FF14 untuk mengembangkan alat ini, jadi ini adalah choise terbaik, tapi alat ini telah diuji juga dalam Chrome22 dan Opera12


Catatan: Versi alat yang dapat Anda lihat di link Live Preview, adalah versi terbatas dari alat. Dengan versi ini Anda hanya dapat memuat satu set khusus dari gambar, yang tercantum pada halaman rumah. Setelah loading gambar Anda dapat menarik semua bentuk, tetapi hanya 6 bentuk pertama akan dihasilkan dalam kode HTML. Keterbatasan ini tidak mencegah Anda untuk menguji semua fungsi dari alat.


Apa peta gambar?

Peta gambar adalah kode HTML yang membuat daerah yang berbeda-pengguna dapat diklik dari suatu gambar. Kode HTML terdiri dari tag HTML peta, dalam hubungannya dengan tag daerah, yang memungkinkan Anda untuk menentukan daerah dengan persegi panjang, poligonal dan melingkar bentuk.
Sebagai contoh, jika Anda memiliki gambar image1.png di halaman HTML Anda, Anda dapat menulis kode berikut:

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

Seperti yang Anda lihat, Anda harus mengatur atribut usemap pada tag img, yang akan memiliki nilai yang sama dari atribut nama di tag peta. Antara <peta> dan </ peta> Anda dapat menentukan banyak <daerah> tag yang Anda inginkan, masing-masing mewakili area-pengguna dapat diklik pada gambar terkait. Setiap daerah harus memiliki atribut bentuk, yang dapat memiliki salah satu dari 3 nilai: rect, poli dan lingkaran. Rect bentuk sepenuhnya ditentukan oleh 2 poin, bentuk poli didefinisikan oleh urutan poin dan bentuk lingkaran didefinisikan oleh titik, yang mewakili pusat, dan radius. Semua poin yang didefinisikan oleh beberapa koordinat, dinyatakan dalam piksel, kerabat ke sudut kiri atas gambar. Bentuk atribut juga dapat memiliki "default" nilai, yang mengacu pada bagian gambar tidak dipetakan dengan salah satu bentuk sebelumnya. Memperhitungkan, sebaliknya, bahwa urutan bentuk didefinisikan dalam peta sangat penting: jika Anda mendefinisikan "default" bentuk seperti bentuk pertama dalam peta, itu akan menimpa semua bentuk berikutnya, karena "default" Bentuk mengacu pada seluruh gambar. Hal ini berlaku juga dengan bentuk yang saling tumpang tindih: Anda dapat menentukan bentuk kecil menjadi bentuk yang lebih besar, tetapi Anda harus menentukan pertama bentuk kecil dan kemudian lebih besar. Jika 2 bentuk berbagi sebagian dari gambar, bentuk didefinisikan pertama, menang.

Jika Anda ingin mengatur secara manual peta gambar Anda harus tahu koordinat semua titik yang diperlukan untuk menentukan bentuk yang berbeda. Mungkin ini bukan masalah besar jika Anda memiliki beberapa daerah untuk memetakan, terutama jika Anda memiliki area melingkar atau persegi panjang. Tapi jika Anda memiliki beberapa daerah, dengan bentuk poligonal, mengatur secara manual bukanlah tugas sederhana.

Alat gambar mapper memungkinkan Anda untuk menggambar bentuk seperti rect, poli, dan lingkaran pada gambar yang dipilih, yang akan diterjemahkan secara otomatis dalam kode HTML yang sesuai yang membuat bidang gambar user-diklik.

Setelah menggambar bentuk pada gambar yang diberikan, Anda dapat menghasilkan kode HTML hanya dengan mengklik sebuah tombol dan kode akan displayied di textarea. Anda dapat menyalin kode HTML dan menggunakannya dalam halaman HTML Anda (s). Anda juga dapat melakukan proses sebaliknya: menyisipkan kode HTML di textarea, Anda dapat memuat kode ini hanya dengan mengklik sebuah tombol; ini akan diterjemahkan dalam bentuk pada gambar dan Anda dapat mengubah mereka, menambahkan bentuk baru dan kembali menghasilkan kode HTML. Mekanisme terbalik ini berguna untuk memungkinkan Anda untuk menyimpan proses pemetaan parsial dan untuk terus memetakan gambar nanti. Hal ini juga berguna untuk memperbaiki "manual" bentuk merancang / positioning: setelah menghasilkan kode dalam textarea, Anda dapat memodifikasi koordinat di textarea dengan cepat dan kembali memuat-itu.

Fitur utama:

  • Anda dapat memilih gambar lokal atau remote
  • Anda dapat mengatur ukuran gambar target: ini adalah ukuran bahwa gambar akan memiliki di halaman HTML Anda
  • Anda dapat memperbesar dan memperkecil gambar di setiap saat dan ini tidak akan mengganggu koordinat nyata yang akan dihasilkan, yang hanya bergantung pada ukuran target gambar. Fitur zoom hanya berguna untuk membantu Anda untuk menggambar bentuk.
  • Anda dapat mengatur beberapa parameter untuk setiap bentuk, seperti "href" atribut, "alt" atribut, "id" dan "kelas" atribut dan akhirnya "target" atribut. Untuk mengatur parameter Anda harus memilih bentuk: untuk memilih bentuk Anda harus memilih panah atas-kiri pada toolbar dan kemudian klik pada bentuk.
  • Anda dapat mengatur beberapa parameter untuk peta: peta "nama", url default dan target.
  • Anda dapat menggambar bentuk memilih bentuk dari alat bar.
  • Untuk menggambar bentuk, setelah memilih dari toolbar, Anda dapat mengklik dengan mouse pada gambar, di mana Anda ingin memulai bentuk.
  • Jika bentuknya lingkaran, titik menggoda adalah pusat: menggerakkan mouse (diklik atau dilepaskan), Anda dapat melihat lingkaran yang mengikuti kursor. Mengklik lagi mouse akan berhenti menggambar lingkaran.
  • Jika bentuknya rect a. titik pertama adalah salah satu sudut. Menggerakkan mouse (diklik atau dilepaskan) akan menarik rect a. Mengklik lagi mouse akan berhenti menggambar.
  • Jika bentuknya poli proses adalah sedikit berbeda: setiap klik mouse akan mengatur titik; titik saat selalu terhubung dengan satu cemara, membuat poli selalu bentuk tertutup; untuk menghentikan menggambar poli (untuk mengatur titik terakhir), Anda harus klik dua kali mouse.
  • Untuk semua bentuk Anda juga bisa berhenti untuk menarik mereka mengklik "berhenti" tombol (panah atas-kiri pada toolbar).
  • Anda dapat melihat koordinat mouse ketika Anda memindahkannya pada gambar.
  • Anda dapat menggunakan perbatasan abu-putus-putus di sekitar gambar untuk menentukan koordinat tepi gambar, sehingga Anda dapat menggunakan perbatasan seperti itu bagian dari gambar: sehingga, Anda dapat mengklik di perbatasan selama menggambar bentuk, jus seperti adalah bagian dari gambar. Sebagai contoh, jika Anda klik pada pojok kiri atas perbatasan, Anda akan menetapkan titik di (0, 0) koordinat. Jika Anda mengklik kiri-perbatasan, di setiap titik, Anda akan menetapkan titik di (0, y) koordinat, dll
  • Anda dapat memilih bentuk yang sudah ditarik dan memodifikasi / mengubah ukuran / menghapusnya. Untuk menghapusnya Anda harus menggunakan "karet" di toolbar, yang akan muncul sebagai ditolak pensil hanya memilih bentuk.
  • Anda dapat memilih warna kontur bentuk dari satu set 5 warna (ini bukan alat desain, jadi saya telah membatasi jumlah warna dan juga Anda tidak dapat memilih warna yang berbeda untuk masing-masing bentuk).
  • Anda dapat klik pada "peta" tombol, yang terlihat hanya ketika Anda memilih "berhenti" tombol pada toolbar dan tidak ada bentuk yang dipilih: jika Anda memiliki beberapa bentuk yang digambar di gambar Anda akan melihat kode HTML di textarea, jika Anda belum ditarik bentuk Anda akan melihat textarea kosong, tapi Anda dapat melewati di dalamnya beberapa kode HTML dan beban itu.
  • Mengklik pada "beban" tombol (yang Anda dapat melihat hanya setelah mengklik "peta" tombol), saat ini kode HTML di textarea akan diterjemahkan dalam bentuk pada gambar.

Anda dapat berkonsultasi manual lengkap alat di link berikut: Manual Online

Jika Anda memiliki pertanyaan, hanya memberikan komentar atau drop me email!


Ambil
Komponen lain dalam kategori iniSemua komponen penulis ini
KomentarPertanyaan yang sering diajukan dan jawaban

Properties

Dibuat:
10 Oktober 12

Pembaharuan terakhir:
N / A

Resolusi tinggi:
Tidak

Browser kompatibel:
Firefox, Opera, Chrome

Termasuk file:
JavaScript JS, HTML, CSS

Software Versi:
HTML5

Kata kunci

eCommerce, eCommerce, Semua barang, app, daerah, kanvas, lingkaran, mengkoordinasikan, HTML5, gambar, peta, mapper, poli, rect, bentuk, target, alat, zoom