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

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Ini adalah satu pemetaan imej html direka untuk pembangun laman web.

Alat ini telah dibangunkan dengan menggunakan kanvas HTML5, jadi penggunaannya adalah terhad kepada pelayar yang menyokong kanvas, tetapi juga API Fail-kanak:

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

Oleh kerana ini adalah alat untuk pemaju, saya berfikir bahawa ini bukanlah satu batasan besar, kerana saya menganggap bahawa pemaju web tidak mempunyai masalah untuk memilih pelayar yang sesuai.

Saya telah menggunakan FF14 untuk membangunkan alat, jadi ini adalah choise yang terbaik, tetapi alat yang telah diuji juga dalam Chrome22 dan Opera12


Nota: Versi alat yang anda boleh lihat di link Live Preview, adalah versi terhad alat. Dengan versi ini, anda hanya boleh memuatkan satu set khusus imej, disenaraikan di halaman rumah. Selepas memuatkan imej anda boleh menarik semua bentuk, tetapi hanya 6 bentuk pertama akan dijana dalam kod HTML. Had ini tidak menghalang anda untuk menguji semua fungsi alat.


Apakah yang dimaksudkan dengan peta imej?

Satu peta imej kod HTML yang menjadikan kawasan user-diklik berbeza imej. Kod HTML terdiri daripada peta HTML tag, sempena tag kawasan, yang membolehkan anda untuk menentukan kawasan yang mempunyai bentuk segi empat tepat, poligon dan bulat.
Sebagai contoh, jika anda mempunyai imej image1.png dalam halaman HTML anda, anda boleh menulis kod 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 perlu menetapkan sifat usemap dalam tag img, yang akan mempunyai nilai yang sama atribut nama dalam tag peta. Antara <peta> dan </ peta> anda boleh menentukan seberapa banyak <kawasan> tag yang anda mahu, setiap satu mewakili kawasan pengguna-diklik pada gambar yang berkaitan. Setiap kawasan mesti mempunyai sifat bentuk, yang boleh mempunyai salah satu daripada 3 nilai: rect, poli dan bulatan. Bentuk rect sepenuhnya ditakrifkan oleh 2 mata, bentuk poli ditakrifkan oleh urutan mata dan bentuk bulatan ditakrifkan oleh mata, yang mewakili pusat, dan jejari. Semua mata ditakrifkan oleh pasangan koordinat, dinyatakan dalam piksel, saudara-mara ke sudut atas kiri imej. Sifat bentuk juga boleh mempunyai "default" nilai, yang merujuk kepada bahagian-bahagian imej yang tidak dipetakan dengan mana-mana bentuk yang sebelumnya. Mengambil kira, sebaliknya, bahawa perintah itu di mana bentuk yang diberikan di dalam peta adalah sangat penting: jika anda menentukan "default" bentuk sebagai bentuk pertama di peta, ia akan mengatasi semua bentuk berikutnya, kerana "default" bentuk merujuk kepada keseluruhan imej. Ini adalah benar juga dengan bentuk yang bertindih antara satu sama lain: anda boleh menentukan bentuk sedikit ke dalam bentuk yang lebih besar, tetapi anda perlu menentukan pertama bentuk yang kecil dan kemudian yang lebih besar satu. Jika 2 bentuk berkongsi sebahagian imej, bentuk yang ditakrifkan pertama, menang.

Jika anda mahu untuk menetapkan secara manual satu peta imej yang anda perlu tahu koordinat semua mata yang diperlukan untuk menentukan bentuk. Mungkin ini bukan satu masalah besar jika anda mempunyai beberapa kawasan untuk peta, terutamanya jika anda mempunyai kawasan bulat atau segi empat tepat. Tetapi jika anda mempunyai beberapa kawasan, dengan bentuk yang poligon, menetapkan secara manual bukanlah satu tugas yang mudah.

Alat mapper imej membolehkan anda untuk menarik bentuk seperti rect, poli, dan bulatan pada imej yang dipilih, yang akan diterjemahkan secara automatik kod HTML yang sama yang menjadikan bidang imej pengguna yang boleh diklik.

Selepas melukis bentuk pada gambar yang diberikan, anda boleh menjana kod HTML hanya klik pada butang dan kod akan displayied dalam textarea a. Anda boleh menyalin kod HTML dan menggunakannya dalam halaman HTML anda (s). Anda juga boleh melakukan proses sebaliknya: menampal kod HTML dalam textarea, anda boleh memuatkan kod ini hanya klik butang; ini akan diterjemahkan dalam bentuk pada imej dan anda boleh mengubah suai, menambah bentuk baru dan menjana semula kod HTML. Mekanisme songsang adalah berguna untuk membolehkan anda menyimpan proses pemetaan separa dan terus peta imej kemudian. Ia juga berguna untuk memperbaiki "manual" bentuk bentuk / kedudukan: selepas menjana kod dalam textarea, anda boleh mengubah suai Koordinat dalam textarea dengan cepat dan memuatkan semula.

Ciri-ciri utama:

  • Anda boleh memilih imej tempatan atau jauh
  • Anda boleh menetapkan saiz imej sasaran; mereka ini adalah saiz gambar yang diambil akan ada dalam halaman HTML anda
  • Anda boleh mengezum masuk dan keluar imej dalam bila-bila masa dan ini tidak akan campur tangan dengan koordinat sebenar yang wujud, yang hanya bergantung kepada saiz sasaran imej. Ciri-ciri zoom hanya berguna untuk membantu anda untuk menarik bentuk.
  • Anda boleh menetapkan beberapa parameter bagi setiap bentuk, seperti "href" sifat, yang "alt" sifat, yang "id" dan "kelas" sifat-sifat dan akhirnya "Sasaran" atribut. Untuk menetapkan parameter yang anda perlu untuk memilih bentuk: untuk memilih bentuk yang anda perlu memilih anak panah atas kiri dalam bar alat dan kemudian klik pada bentuk.
  • Anda boleh menetapkan beberapa parameter untuk peta: peta "nama", url lalai dan sasaran.
  • Anda boleh menarik bentuk memilih bentuk dari bar alat.
  • Untuk menarik bentuk, selepas memilih dari bar alat, anda boleh klik dengan tetikus pada imej, di mana anda mahu untuk memulakan bentuk.
  • Jika bentuk adalah bulatan, titik firts adalah pusat: menggerakkan tetikus (klik atau dibebaskan), anda boleh melihat bulatan yang mengikuti kursor. Klik sekali lagi tetikus akan berhenti melukis bulatan.
  • Jika bentuk adalah rect a. titik pertama adalah salah satu sudut. Menggerakkan tetikus (klik atau dibebaskan) akan menarik rect a. Klik sekali lagi tetikus akan berhenti melukis.
  • Jika bentuk adalah poli proses ini sedikit berbeza: setiap klik tetikus akan menetapkan satu mata; titik semasa sentiasa berhubung dengan yang firs, menjadikan poli sentiasa bentuk yang tertutup; berhenti untuk menarik poli (untuk menetapkan titik terakhir) anda perlu klik dua kali tetikus.
  • Untuk semua bentuk yang anda juga boleh berhenti untuk menarik mereka klik pada butang "berhenti" (anak panah atas kiri dalam bar alat).
  • Anda boleh lihat Koordinat tetikus apabila anda bergerak pada imej.
  • Anda boleh menggunakan sempadan kelabu-putus-putus di sekitar imej untuk menentukan koordinat pinggir imej, jadi anda boleh menggunakan sempadan kerana ia adalah sebahagian daripada imej, maka, anda boleh klik di sempadan semasa lukisan bentuk, jus kerana ia adalah sebahagian daripada imej. Sebagai contoh, jika anda klik pada sudut atas kiri sempadan, anda akan menetapkan satu mata di (0, 0) menyelaras. Jika anda klik kiri sempadan, di mana-mana tempat, anda akan menetapkan satu mata di (0, y) koordinat, dan lain-lain
  • Anda boleh memilih bentuk yang telah disediakan dan mengubah suai / mengubah saiz / mengeluarkannya. Untuk buang, anda perlu menggunakan "getah" dalam bar alat, yang akan muncul sebagai pensil menolak hanya memilih bentuk.
  • Anda boleh memilih warna kontur bentuk dari satu set 5 warna (ini bukanlah satu alat reka bentuk, jadi saya telah menghadkan bilangan warna dan juga anda tidak boleh memilih warna yang berbeza untuk setiap bentuk).
  • Anda boleh klik pada "peta" butang, yang boleh dilihat hanya apabila anda memilih butang "berhenti" pada bar alat dan tiada bentuk dipilih: jika anda mempunyai beberapa bentuk yang dilukis pada imej yang anda akan dapat melihat kod HTML dalam textarea, jika anda belum ditarik bentuk yang anda akan melihat textarea kosong, tetapi anda boleh lalu di dalamnya beberapa kod HTML dan beban.
  • Klik pada butang "beban" (yang anda boleh melihat hanya selepas klik pada butang "peta"), kod HTML di dalam textarea akan diterjemahkan dalam pelbagai bentuk pada imej.

Anda boleh rujuk manual lengkap alat di link berikut: Manual Talian

Jika anda mempunyai sebarang pertanyaan, sila tinggalkan komen atau menggugurkan saya e-mel!


Memuat turun
Komponen-komponen lain dalam kategori iniSemua komponen pengarang ini
KomenSoalan-soalan lazim dan jawapan

Properties

Dibuat:
10 Okt 12

Kemaskini:
N / A

Resolusi Tinggi:
Tiada

Pelayar Sesuai:
Firefox, Opera, Chrome

Fail Termasuk:
JavaScript JS, HTML, CSS

Perisian Versi:
HTML5

Kata kunci

eCommerce, eCommerce, Semua Produk, aplikasi, kawasan, kanvas, bulatan, menyelaraskan, HTML5, imej, peta, mapper, poli, rect, bentuk, sasaran, alat, zum