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

— Eklenti WorldWideScripts.net için

@tr1wwsGüncel kalmak bizim beslemesine abone olun!

Yeni! Istediğiniz gibi bizi takip edin!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Bu web geliştiricileri için tasarlanmış bir görüntü html haritalama olduğunu.

Aracı HTML5 tuval kullanılarak geliştirilmiştir, bu yüzden kullanımı tuval destekleyen tarayıcılar ile sınırlıdır, ama aynı zamanda Dosya API:

IE10 + FF3.6 + FF14-, FF18 + (FF15 FF18 çözülecektir bazı kanvas işlevleri, Bug 787623, ile ilgili sorunlar var), Chrome6 + Safari6 + Opera11.1 +

Bu geliştiriciler için bir araçtır beri bir web geliştirici uygun bir tarayıcı seçmek için hiçbir sorun olmadığını varsayalım, çünkü bu büyük bir sınırlama olmadığını düşünüyorum.

Ben aracı geliştirmek için FF14 kullandık, bu nedenle bu en iyi seçenekse, ancak aracı Chrome22 ve Opera12 da test edilmiştir


Not: Canlı Önizleme bağlantısını görebilirsiniz aracın versiyonu, aracın sınırlı bir sürümüdür. Bu sürüm ile sadece ana sayfasında listelenmiş görüntülerin belirli bir dizi yükleyebilirsiniz. Bir görüntüyü yükledikten sonra tüm şekiller çizebilirsiniz, fakat sadece ilk 6 şekiller HTML kodu oluşturulacaktır. Bu sınırlama, aracın tüm fonksiyonlarını test etmek için engel değildir.


Bir görüntü haritası nedir?

Bir resim harita görüntünün kullanıcı tıklanabilir farklı alanlarda kılan bir HTML kodudur. HTML kodu, dikdörtgen çokgen ve dairesel şekillerle alanları tanımlamak için izin verir alanı etiketi ile birlikte, harita HTML etiketinin oluşur.
Eğer HTML sayfanıza image1.png görüntüsünü varsa Örneğin, aşağıdaki kodu yazabilirsiniz:

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

Gördüğünüz gibi, harita etiketinde name niteliği aynı değere sahip olacaktır img etiketinin IS usemap niteliğini, ayarlamak zorundasınız. Istediğiniz gibi <harita> ve </ harita> Arasında ilişkili görüntü üzerinde kullanıcı tıklanabilir alanını temsil eden her biri birçok <bölge> etiketlerini tanımlayabilirsiniz. Rect, poli ve daire: Her alanda 3 değerlerden birine sahip bir şekil niteliği olması gerekir. Rect şekli tamamen 2 nokta ile tanımlanır, bir poli şeklinin bir sekansı tarafından tayin edilmektedir ve bir daire şeklinde bir merkezi temsil eder, bir nokta, bir yarıçapı ile tanımlanır. Tüm noktaları koordinatlarının bir çift tarafından tanımlanır, görüntünün sol üst köşesine yakınları, piksel olarak ifade edilmiştir. Şekil nitelik de değil, önceki şekillerin herhangi biriyle eşlenen görüntü kısımlarına bkz: "default" değeri, sahip olabilir. Şekiller haritasında tanımlanan sırası çok önemli olduğunu, bunun yerine, dikkate almak: haritanın ilk şekli olarak "varsayılan" şeklinde tanımlayan, eğer, sonraki tüm şekiller geçersiz kılacaktır "varsayılan" çünkü şekil tüm resmini ifade eder. Eğer daha büyük bir şekle biraz şekil tanımlayabilirsiniz, ancak daha sonra büyük bir ilk küçük şekli tanımlamak zorunda ve: Bu, birbirleriyle örtüşen şekiller ile de geçerlidir. 2 şekiller görüntünün bir kısmını paylaşan, öncelikle tanımlanan biçim kazanır.

Elle bir görüntü eşlemesi ayarlamak istiyorsanız farklı şekiller tanımlamak için gereken tüm noktaların koordinatlarını bilmek zorunda. Muhtemelen bu dairesel veya dikdörtgen alanlar var, özellikle eğer eşleme birkaç alanlar varsa büyük bir sorun değil. Ama bir çokgen şekli ile, çeşitli alanlarda varsa, bunları el set basit bir görev değildir.

Görüntü mapper aracı görüntü kullanıcı tıklanabilir alanlar yapar karşılık gelen HTML kodu otomatik olarak tercüme edilecektir böyle Seçilen görüntünün üzerinde rect, poli ve daire gibi şekiller çizmek için izin verir.

Verilen resmin üzerine şekiller çizerek sonra, sadece bir düğmeye tıklayarak HTML kodu üretebilir ve kod textarea displayied edilecektir. HTML kodunu kopyalayın ve HTML sayfası (lar) içinde kullanabilirsiniz. Sen Ters işlemi yapmak da yapabilirsiniz: textarea HTML kodunu yapıştırarak, bu kod sadece bir düğmeye tıklayarak yükleyebilirsiniz; Bu resmin üzerine şekiller tercüme edilecek ve onları değiştirmek, yeni şekiller ekleyebilir ve HTML kodunu yeniden üretebilir. Bu ters mekanizması kısmi haritalama işlemi kaydetmek ve daha sonra görüntüyü eşleştirmek devam etmesine izin yararlıdır. Textarea kod oluşturduktan sonra, sinek textarea koordinatları değiştirebilirsiniz ve yeniden yükleyin: It "elle" şeklinde tasarımı / konumlandırma rafine de yararlıdır.

Ana Özellikler:

  • Bir yerel veya uzak bir görüntü seçebilirsiniz
  • Hedef görüntü boyutlarını ayarlayabilirsiniz: Bu resim HTML sayfanıza sahip olacağı boyutları
  • Siz ve her an görüntü uzaklaştırmak ve bu görüntünün yalnızca hedef boyutlarına bağlıdır oluşturulacak gerçek koordinatlar, engel olmaz. Zoom özelliği şekiller çizmek için sadece yararlıdır.
  • Bu tür "href" özniteliği, "alt" özniteliği, "id" ve "sınıf" nitelikleri ve nihayet "hedef" nitelik olarak her şekil için çeşitli parametreler ayarlayabilirsiniz. Eğer şekil seçmek zorunda parametreyi ayarlamak için: Araç çubuğundaki üst sol ok seçin ve ardından şekil tıklamanız gerekiyor bir şekil seçin.
  • Haritası "adı" varsayılan url ve hedefi: Sen Harita için bazı parametreleri ayarlayabilirsiniz.
  • Sen bir araç çubuğundan şekli seçerek bir şekil çizmek olabilir.
  • Araç çubuğundan seçtikten sonra, bir şekil çizmek için, sadece sen şeklini başlatmak istediğiniz görüntüye, fare ile tıklayarak yapabilirsiniz.
  • Şekil bir dairedir ise, Flirts nokta merkezi: (tıklandığında veya serbest) fareyi hareket ettirerek, sen imleci takip daire görebilirsiniz. Yine fareyi tıklayarak daire çizim duracaktır.
  • Şekil rect değilse. Birinci nokta köşe biridir. (Tıklandığında veya serbest) fareyi hareket ettirerek bir rect çekecek. Yine fareyi tıklayarak çizim duracaktır.
  • Şekil bir poli ise işlem biraz farklıdır: bir nokta koyacaktır fare her tıklama; Geçerli nokta her zaman, her zaman poli Kapalı bir şekil verme, köknar biri ile bağlanır; poli çizmek için durdurmak için fare çift tıklamanız gerekiyor (son noktasını ayarlamak için).
  • Tüm şekiller için de onlara "dur" düğmesine (araç çubuğunda sol üst ok) tıklayarak çizmek için durdurabilirsiniz.
  • Görüntünün üzerinde hareket ederken, fare koordinatlarını görebilirsiniz.
  • Eğer sınır kullanabilirsiniz böylece resmin parçası gibi, görüntünün kenar koordinatlarını belirlemek için görüntünün çevresinde gri kesik sınır kullanabilirsiniz: öyleyse, şekil çizim sırasında sınırında tıklayabilirsiniz, jus o kadar Görüntünün bir parçası oldu. Eğer sınırın sol üst köşesindeki tıklayın Örneğin, size bir noktaya koyacaktır (0, 0) koordine eder. Eğer sol sınır tıklarsanız, herhangi bir noktada, vb, koordinatları (0, y) bir noktaya koyacaktır
  • Bunu kaldırmak / yeniden boyutlandırmak / zaten çizilmiş şekli seçin ve değiştirebilirsiniz. Bunu kaldırmak için bir geri çevirdi kalem sadece bir şekil seçmek gibi görünecektir araç çubuğundaki "lastik", kullanmak zorunda.
  • (Bu bir tasarım aracı değildir, bu yüzden renk sınırlı sayıda ve aynı zamanda her şekil için farklı bir renk seçemezsiniz) 5 renk bir dizi şekillerin kontur rengini seçebilirsiniz.
  • , Resmin üzerine çizilmiş bazı şekiller varsa bir textarea HTML kodunu göreceksiniz: Sen araç çubuğundaki "dur" düğmesini seçin ve hiçbir şekil seçildiğinde da görülebilir, "map" düğmesine tıklayabilirsiniz Henüz bir şekil çizilmiş değil varsa boş bir textarea göreceksiniz, ancak bunun bazı HTML kodunu geçmiş olabilir ve yükleyin.
  • (Sadece "harita" butonuna tıkladıktan sonra görebilirsiniz) "yük" butonuna tıklayarak, textarea HTML kodunu mevcut görüntü üzerinde şekiller tercüme edilecektir.

Sen şu linkten aracın komple el danışabilirsiniz: Çevrimiçi Manual

Herhangi bir sorunuz varsa, sadece bir yorum bırakın ya da bana mail atın!


Indir
Bu kategorideki diğer bileşenleriBu yazarın tüm bileşenleri
YorumlarSıkça sorulan sorular ve cevapları

Özellikleri

Oluşturuldu:
10 Ekim 12

Son Güncelleme:
N / A

Yüksek çözünürlük:
Hayır

Uyumlu Tarayıcılar:
Firefox, Opera, Chrome

Dosyalar Dahil:
JavaScript JS, HTML, CSS

Yazılım Versiyonu:
HTML5

Anahtar kelimeler

eTicaret, eTicaret, Tü, m Ü, rü, nleri, app, alan, tuval, daire, koordinat, html5, gö, rü, ntü, harita, mapper, ç, oklu, rect, şekil, hedef, alet, zoom