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 طراحی شده برای توسعه دهندگان وب است.

ابزار توسعه داده شده است با استفاده از بوم HTML5، بنابراین استفاده از آن محدود به مرورگر هایی که بوم حمایت است، اما همچنین API فایل:

IE10 +، + FF3.6، FF14-، FF18 + (به FF15 مشکلات را با برخی از ویژگی های بوم، اشکال 787623، خواهد شد که در FF18 حل و فصل)، Chrome6 +، Safari6 +، + Opera11.1

از آنجا که این ابزار برای توسعه دهندگان است، من فکر می کنم که این یک محدودیت بزرگ نیست، زیرا گمان می کنم که یک توسعه دهنده وب هیچ مشکلی برای انتخاب یک مرورگر مناسب است.

من استفاده کرده اند FF14 به منظور توسعه ابزار، بنابراین این بهترین انتخاب شایسته است، اما ابزار نیز در 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، که همان مقدار از ویژگی نام در تگ نقشه. بین <map> و </ نقشه> شما می توانید به عنوان بسیاری از <منطقه> برچسب ها که شما می خواهید هر یک به نمایندگی یک منطقه قابل کلیک در کاربران تصویر مرتبط تعریف،. صحیح، پلی و دایره: هر منطقه باید یک ویژگی شکل، که می تواند یکی از 3 ارزش داشته باشد. شکل صحیح به طور کامل توسط 2 امتیاز تعریف شده است، یک شکل پلی است که توسط یک دنباله ای از نقاط تعریف شده و شکل دایره است که توسط یک نقطه، که نشان دهنده مرکز و شعاع تعریف شده است. تمام نقاط توسط یک زن و شوهر از مختصات تعریف شده است، بیان شده در پیکسل، بستگان به گوشه بالا سمت چپ تصویر. ویژگی شکل همچنین می توانید "پیش فرض" ارزش، که به بخش هایی از تصویر با هر یک از اشکال قبلی نقشه برداری نیست اشاره داشته باشد. را به حساب، به جای آن، که نظم که در آن اشکال در نقشه تعریف شده بسیار مهم است: اگر "پیش فرض" شکل به عنوان اولین شکل در نقشه تعریف می کنید، آن را به تمام اشکال بعدی زیر پا بگذارند، به این دلیل که "پیش فرض" شکل اشاره به تصویر می باشد. این درست است همچنین با اشکال که همپوشانی یکدیگر: شما می توانید یک شکل کمی به شکل بزرگتر تعریف، اما شما باید به تعریف اول به شکل کمی و پس از آن بزرگتر. اگر 2 اشکال به اشتراک گذاشتن یک بخشی از تصویر، شکل تعریف اول، برنده است.

اگر شما می خواهید برای تنظیم دستی یک تصویر نقشه شما باید بدانید که مختصات تمام نقاط مورد نیاز برای تعریف اشکال مختلف. احتمالا این یک مشکل بزرگ اگر شما به نقشه مناطق چند، به خصوص اگر شما مناطق دایره یا مستطیل شکل است. اما اگر شما به مناطق مختلف، با شکل چند ضلعی، آنها را به صورت دستی تنظیم است کار ساده ای نیست.

ابزار آیفون تصویری شما اجازه می دهد به رسم اشکال مانند صحیح، پلی، و دایره در تصویر انتخاب شده، که به طور خودکار در کد HTML غیر مربوطه که باعث می شود مناطق از تصویر کاربر قابل کلیک ترجمه شده است.

پس از رسم اشکال بر روی تصویر داده شده، شما می توانید کد HTML غیر فعال تولید سادگی با کلیک کردن بر روی یک دکمه و کد را در یک ناحیه ی متن displayied. شما می توانید کد HTML را کپی کرده و استفاده از آن در صفحه HTML خود را (ها). شما همچنین می توانید روند معکوس: چسباندن کد HTML غیر فعال در ناحیه ی متن، شما می توانید بار این کد سادگی با کلیک کردن یک دکمه. این خواهد بود که در اشکال بر روی تصویر ترجمه و شما می توانید آنها را تغییر دهید، اضافه کردن اشکال جدید و دوباره تولید کد HTML. این مکانیزم معکوس اجازه می دهد تا شما را به نجات فرایند نقشه برداری جزئی و برای ادامه به نقشه تصویر بعد مفید است. این نیز مفید است به اصلاح "دستی" طراحی شکل / موقعیت: پس از تولید کد در ناحیه ی متن، شما می توانید مختصات در ناحیه ی متن در پرواز را تغییر دهید و دوباره بار آن را.

ویژگی های اصلی:

  • شما می توانید یک تصویر را انتخاب کنید محلی یا راه دور
  • شما می توانید اندازه تصویر هدف تعیین: این اندازه ها که تصویر را در صفحه HTML خود را
  • شما می توانید در داخل و خارج از تصویر را در هر لحظه زوم و این را نمی خواهد با مختصات واقعی است که تولید خواهد شد، که تنها در اندازه هدف از تصویر بستگی دخالت کند. ویژگی زوم تنها مفید برای کمک به شما برای رسم اشکال است.
  • شما می توانید پارامترهای مختلفی برای هر شکل، مانند "عکاس هنگام عکسبرداری" ویژگی، "دگرساز" ویژگی ها، "ID" و "کلاس" ویژگی و در نهایت "هدف" ویژگی تنظیم شده است. برای تنظیم پارامتر شما باید انتخاب کنید شکل: به یک شکل شما باید انتخاب کنید که فلش بالا سمت چپ در نوار ابزار و سپس بر روی شکل کلیک کنید را انتخاب کنید.
  • نقشه "نام"، ادرس URL پیش فرض و هدف: شما می توانید برخی از پارامترهای برای نقشه تنظیم شده است.
  • شما می توانید یک شکل انتخاب شکل از نوار ابزار در قرعه کشی.
  • برای رسم یک شکل، پس از انتخاب آن از نوار ابزار، می توانید به سادگی با موس بر روی تصویر، که در آن شما می خواهید شروع به شکل کلیک کنید.
  • اگر به شکل یک دایره است، نکته firts مرکز است: حرکت ماوس (کلیک و یا منتشر شد)، شما می توانید یک دایره است که دنبال مکان نما را ببینید. کلیک کردن دوباره ماوس را متوقف خواهد کرد رسم دایره.
  • اگر شکل rect است. اولین نقطه یکی از گوشه است. حرکت ماوس (کلیک و یا منتشر شد) یک صحیح قرعه کشی. کلیک کردن دوباره ماوس را متوقف خواهد کرد به کشیدن.
  • اگر به شکل پلی است که فرآیند کمی متفاوت است: هر کلیک ماوس به یک نقطه را تعیین کنید. نقطه فعلی است که همیشه با یک دپو متصل، ساخت پلی همیشه یک شکل بسته. برای متوقف کردن را به منظور جلب پلی (به مجموعه ای از آخرین نقطه) شما باید دوبار کلیک بر روی موس.
  • برای تمام اشکال شما همچنین می توانید به منظور جلب آنها را بر روی "توقف" را فشار دهید (فلش بالا سمت چپ در نوار ابزار) کلیک متوقف شود.
  • شما می توانید ببینید ماوس مختصات زمانی که شما آن را به حرکت بر روی تصویر.
  • آن را به عنوان چنین است، شما می توانید در مرز در طراحی شکل کلیک کنید، JUS: شما می توانید مرز خاکستری نقش برآب در اطراف تصویر برای تعیین مختصات لبه تصویر استفاده کنید، بنابراین شما می توانید مرز استفاده از آن بخشی از تصویر بود بخشی از تصویر بود. به عنوان مثال، اگر شما در گوشه بالا سمت چپ از مرز کلیک کنید، شما یک نقطه در مجموعه (0، 0) مختصات. اگر شما با کلیک مرزی سمت چپ، در هر نقطه، شما یک نقطه در (0، y) را تنظیم مختصات، و غیره
  • شما می توانید یک شکل حال حاضر رسم شده را انتخاب کنید و تغییر / تغییر اندازه / حذف میکند. برای حذف آن شما را مجبور به استفاده از "لاستیک" در نوار ابزار، که ظاهر خواهد شد به عنوان یک مداد را رد کرد تنها انتخاب یک شکل.
  • شما می توانید رنگ از کانتور از اشکال از مجموعه ای از 5 رنگ را انتخاب کنید (این است که یک ابزار طراحی نیست، بنابراین من تعداد رنگ را محدود کرده اند و همچنین شما می توانید رنگ های مختلف برای هر شکل را انتخاب کنید).
  • شما می توانید در "نقشه" را فشار دهید، که قابل مشاهده است تنها زمانی که شما انتخاب کنید "توقف" را فشار دهید در نوار ابزار و شکل انتخاب شده است: اگر شما برخی از اشکال کشیده شده بر روی تصویر شما خواهد شد کد HTML در یک ناحیه ی متن مراجعه کنید، اگر شما هنوز یک شکل کشیده نمی شما یک ناحیه ی متن خالی ببینید، اما شما می توانید گذشته در آن برخی از کدهای HTML و بار آن را.
  • با کلیک بر روی "بار" را فشار دهید (که شما می توانید تنها پس از کلیک کردن بر روی "نقشه" را فشار دهید را ببینید)، در حال حاضر کد HTML غیر در ناحیه ی متن خواهد شد در اشکال بر روی تصویر ترجمه شده است.

شما می توانید کتابچه راهنمای کامل از ابزار را در لینک زیر مراجعه نمایند: کتابچه راهنمای کاربر آنلاین

اگر شما هر گونه سوال، فقط یک نظر بگذارید و یا یک ایمیل به رها من!


دانلود کنید
مولفه های دیگر در این دسته استتمام اجزای این کاربر
نظراتغالبا پرسش و پاسخ خواسته

خواص

ایجاد شده:
10 اکتبر 12

اخرین بروزرسانی:
N / A

کیفیت بالا:
هیچ

سازگار با مرورگرهای:
فایرفاکس، اپرا، کروم

فایل های شامل:
جاوا اسکریپت JS، HTML، CSS

نسخه نرم افزار:
HTML5

کلمات کلیدی

تجارت الکترونیک, تجارت الکترونیک, همه موارد, برنامه, منطقه, بوم نقاشی, دایره, مختصات, HTML5, تصویر, نقشه, آیفون, پلی, RECT, شکل, هدف, ابزار, زوم