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 FF18 میں حل کیا جائے گا کہ کچھ کینوس functionalities، بگ 787623، کے ساتھ مسائل ہیں)، Chrome6 +، Safari6 +، Opera11.1 +

یہ ڈویلپرز کے لئے ایک آلہ ہے میں نے ایک ویب ڈویلپر ایک مناسب براؤزر منتخب کرنے کے لئے کوئی مسئلہ نہیں ہے کہ لگتا ہے کیونکہ، میں، یہ ایک بڑی حد نہیں ہے لگتا ہے کہ.

میں آلے کو تیار کرنے کے لئے FF14 استعمال کیا ہے، تو یہ سب سے اچھا choise ہے، لیکن آلے Chrome22 اور Opera12 میں بھی تجربہ کیا گیا ہے


نوٹ: آپ کو لائیو پیش نظارہ لنک میں دیکھ سکتے ہیں کہ آلے کے ورژن، کے آلے کی ایک محدود ورژن ہے. اس ورژن کے ساتھ آپ کو صرف گھر کے صفحے پر دی گئی تصاویر کا ایک مخصوص سیٹ، لوڈ کر سکتے ہیں. ایک تصویر لوڈ کرنے کے بعد آپ تمام سائز اپنی طرف متوجہ کر سکتے ہیں، لیکن صرف پہلی 6 سائز HTML کوڈ میں پیدا کی جائے گی. یہ حد کے آپ کے آلے کے تمام functionalities ٹیسٹ کرنے کی روک تھام نہیں ہے.


ایک تصویر کا نقشہ کیا ہے؟

ایک تصویر کا نقشہ ایک تصویر کے صارف کے کلک پزیر مختلف علاقوں ہے کہ ایک ایچ ٹی ایم ایل کوڈ ہے. ایچ ٹی ایم ایل کوڈ آپ علاقےآپ آئتاکار، polygonal اور سرکلر سائز کے ساتھ علاقوں کی وضاحت کرنے کی اجازت دیتا ہے کہ علاقے ٹیگ، ساتھ مل کر میں، نقشہ HTML ٹیگ پر مشتمل ہے.
آپ اپنے HTML صفحے میں image1.png تصویر ہے تو ایک مثال کے طور پر،، آپ کو مندرجہ ذیل کوڈ لکھ سکتے ہیں:

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

آپ دیکھ سکتے ہیں کے طور پر، آپ نقشے ٹیگ نام وصف کی ایک ہی قیمت پڑے گا کہ IMG ٹیگ میں usemap وصف، قائم کرنے کے لئے ہے. آپ چاہتے ہیں کے طور پر <نقشہ> اور </ نقشہ> آپ کے درمیان، منسلک تصویر پر ایک صارف کے کلک پزیر علاقے کی نمائندگی کرنے والے ہر ایک کے طور پر کئی <علاقے> ٹیگز وضاحت کر سکتے ہیں. RECT، پولی، کثیر اور سرکل: ہر علاقے 3 اقدار میں سے ایک ہو سکتا ہے کہ ایک شکل وصف، ہونا ضروری ہے. RECT شکل مکمل طور پر 2 پوائنٹس کی طرف سے بیان کیا جاتا ہے، ایک پولی، کثیر شکل پوائنٹس کی ایک ہی تسلسل کی طرف سے بیان کیا جاتا ہے اور ایک دائرے کی شکل کے مرکز کی نمائندگی کرتا ہے کہ ایک نقطہ،، اور ایک رداس کی طرف سے بیان کیا جاتا ہے. تمام پوائنٹس کے نقاط کے ایک جوڑے کی طرف سے تعریف کر رہے ہیں، تصویر کے سب سے اوپر بائیں کونے میں رشتہ داروں، پکسلز میں کا اظہار کیا. شکل وصف بھی گزشتہ سائز میں سے کسی کے ساتھ مائچترت تصویر کے حصے کا حوالہ دیتے ہیں کہ "پہلے سے طے شدہ" قیمت، کر سکتے ہیں. سائز کے نقشے میں تعریف کر رہے ہیں جس میں حکم بہت اہم ہیں کہ، اس کے بجائے، اکاؤنٹ میں لے لو: آپ نقشے میں پہلی شکل کے طور پر "ڈیفالٹ" شکل کی وضاحت تو یہ بعد کے تمام سائز کی جگہ لے لے گا "ڈیفالٹ" کیونکہ شکل پوری تصویر کی طرف اشارہ. اگر آپ ایک بڑی شکل میں ایک چھوٹی سی شکل وضاحت کر سکتے ہیں، لیکن آپ کو تو بڑے سے پہلے چھوٹی سی شکل وضاحت کرنا ہے اور یہ ایک دوسرے وورلیپ کہ سائز کے ساتھ بھی درست ہے. 2 سائز تصویر کا ایک حصہ شیئر تو پہلے وضاحت کی شکل، جیت لیا.

آپ دستی طور پر ایک تصویر کا نقشہ قائم کرنے کے لئے چاہتے ہیں تو آپ مختلف سائز کی وضاحت کرنے کی ضرورت ہے تمام پوائنٹس کے نقاط جاننا ضروری ہے. شاید یہ آپ کو سرکلر یا آئتاکار علاقوں ہے خاص طور پر اگر، آپ نقشے پر چند علاقوں میں ہیں تو ایک بڑا مسئلہ نہیں ہے. لیکن آپ کو ایک polygonal شکل کے ساتھ، کئی علاقوں میں ہے تو، دستی طور پر ان قائم ایک آسان کام نہیں ہے.

تصویر mapper آلہ آپ کو صارف کے کلک پزیر تصویر کے علاقوں میں ہے کہ اسی HTML کوڈ میں خود کار طریقے سے ترجمہ کیا جائے گا کہ اس طرح منتخب کردہ تصویر پر RECT، پولی، کثیر، اور دائرے کے طور پر سائز، اپنی طرف متوجہ کرنے کی اجازت دیتا ہے.

دی گئی تصویر پر سائز ڈرائنگ کرنے کے بعد، آپ کو صرف ایک بٹن پر کلک HTML کوڈ پیدا کر سکتے ہیں اور کوڈ ایک textarea میں displayied جائے گا. آپ کو HTML کوڈ کاپی کریں اور اپنے HTML صفحے (زبانیں) میں اسے استعمال کر سکتے ہیں. آپ کو ریورس عمل بھی کر سکتے ہیں: textarea میں HTML کوڈ چسپاں، آپ اس کوڈ کو صرف ایک بٹن پر کلک لوڈ کر سکتے ہیں؛ اس تصویر پر سائز میں ترجمہ کیا جائے گا اور آپ کو ان پر نظر ثانی نیا سائز شامل کریں اور HTML کوڈ دوبارہ پیدا کر سکتے ہیں. یہ ریورس طریقہ کار آپ کو ایک جزوی میپنگ کے عمل کو بچانے کے لئے اور بعد میں تصویر کے نقشے پر جاری رکھنے کے لئے اجازت دینے کے لئے مفید ہے. textarea میں کوڈ کو پیدا کرنے کے بعد، آپ مکھی پر textarea میں نقاط نظر ثانی کر سکتے ہیں اور اسے دوبارہ لوڈ: یہ بھی "دستی" / پوزیشننگ ڈیزائن شکل کو بہتر بنانے کے لئے بھی مفید ہے.

اہم خصوصیات:

  • آپ کو ایک مقامی یا دور دراز کے تصویر منتخب کر سکتے ہیں
  • آپ ھدف بنانا تصویر کے سائز مقرر کر سکتے ہیں: یہ تصویر اپنے HTML صفحے میں ہوگا سائز ہیں
  • تم میں اور کسی بھی لمحے میں تصویر باہر زوم کر سکتے ہیں اور یہ صرف تصویر کے ہدف کے سائز پر منحصر ہے کہ پیدا کیا جائے گا کہ اصلی کے نقاط، کے ساتھ مداخلت نہیں کرے گا. زوم کی خصوصیت صرف آپ ہی سائز اپنی طرف متوجہ کرنے میں مدد کے لئے مفید ہے.
  • تم نے اس طرح "href کی" وصف، "ALT" وصف، "ID" اور "کلاس" صفات اور آخر میں "ہدف" وصف کے طور پر ہر شکل کے لئے کئی پیرامیٹرز، مقرر کر سکتے ہیں. آپ کی شکل کو منتخب کرنے کی ضرورت پیرامیٹر قائم کرنے کے لئے: آپ ٹول بار میں سب سے اوپر بائیں تیر منتخب کریں اور پھر شکل پر کلک کرنے کے لئے ہے ایک سائز منتخب کرنے کے لئے.
  • نقشے "NAME"، پہلے سے طے شدہ یو آر ایل اور ہدف: آپ نقشے کے لئے کچھ پیرامیٹرز کو مقرر کر سکتے ہیں.
  • آپ کو ایک آلے کے بار سے شکل کو منتخب کرنے کی ایک شکل اپنی طرف متوجہ کر سکتے ہیں.
  • ٹول بار میں سے منتخب کرنے کے بعد، ایک شکل اپنی طرف متوجہ کرنے کے لئے، آپ کو صرف آپ کو شکل شروع کرنا چاہتے ہیں، جہاں تصویر، پر ماؤس کے ساتھ کلک کر سکتے ہیں.
  • شکل ایک دائرے کی مانند ہے، firts نقطہ مرکز ہے: (کلک کر یا جاری) ماؤس کو منتقل، آپ کرسر کو فالو کریں کہ ایک دائرے میں دیکھ سکتے. پھر ماؤس کلک کرنے کے دائرے ڈرائنگ بند ہو جائیں گے.
  • شکل ایک RECT ہے. پہلا نقطہ کونے سے ایک ہے. (پر کلک کر یا جاری) ماؤس کو منتقل ایک RECT طرف متوجہ کرے گا. پھر ماؤس کلک کرنے سے ڈرائنگ کو روک دے گا.
  • شکل ایک پولی، کثیر ہے تو عمل تھوڑا مختلف ہے: ایک نقطہ نظر قائم کرے گا ماؤس میں سے ہر ایک پر کلک کریں؛ موجودہ نقطہ ہمیشہ متعدد ایک بند شکل بنانے، ایف آئی آرز ایک کے ساتھ منسلک کیا جاتا ہے؛ کثیر اپنی طرف متوجہ کرنے کے لئے روکنے کے لئے آپ ماؤس کلک کریں دوگنا کرنا ہوگا (آخری نقطہ مقرر).
  • تمام سائز کے لئے آپ کو بھی ان "سٹاپ" کے بٹن کو (ٹول بار میں سب سے اوپر بائیں تیر) پر کلک متوجہ کرنے روک سکتے ہیں.
  • آپ تصویر پر منتقل جب ماؤس سمنوی دیکھ سکتے ہیں.
  • آپ سرحد استعمال کر سکتے ہیں تو یہ تصویر کا حصہ تھا کے طور پر آپ، کنارے تصویر کے سمنوی تعین کرنے کے لئے تصویر کے ارد گرد بھوری ڈیش دار سرحد پر استعمال کر سکتے ہیں: تو، آپ کو شکل ڈرائنگ کے دوران سرحد پر کلک کر سکتے ہیں، حق کے طور پر تصویر کا حصہ تھا. آپ سرحد کے سب سے اوپر بائیں کونے پر کلک کریں اگر مثال کے طور پر،، آپ کو ایک نقطہ نظر قائم کرے گا (0، 0) نقاط. آپ کو بائیں سرحد پر کلک کریں، کسی بھی موڑ میں، آپ وغیرہ، سمنوی (0، Y) میں ایک نقطہ نظر قائم کرے گا
  • تم نے اسے دور / سائز تبدیل کریں / ایک پہلے سے تیار کی شکل کو منتخب کریں اور نظر ثانی کر سکتے ہیں. اسے ختم کرنے کے لئے آپ کو ایک ٹھکرا دیا پنسل صرف ایک شکل کو منتخب کرنے کے طور پر دکھایا جائے گا کہ ٹول بار میں "ربڑ" استعمال کرنا ہے.
  • تم (یہ ایک ڈیزائن کے آلے نہیں ہے، تو میں رنگ کی تعداد محدود ہے اور یہ بھی آپ کو ہر شکل کے لئے ایک مختلف رنگ کا انتخاب نہیں کر سکتے ہیں) 5 رنگوں کی ایک سیٹ سے سائز کی سموچ کا رنگ منتخب کر سکتے ہیں.
  • ، آپ تصویر پر تیار کی بعض شکلیں بناتا ہے اگر آپ کو ایک textarea میں HTML کوڈ دیکھ سکیں گے: آپ ٹول بار پر "سٹاپ" کے بٹن کو منتخب کریں اور کوئی شکل منتخب کیا جاتا ہے صرف اس وقت جب آتا ہے، "نقشہ" کے بٹن پر کلک کر سکتے ہیں اگر آپ نے ابھی ایک شکل تیار نہیں ہے تو آپ کو ایک خالی textarea نظر آئے گا، لیکن آپ کو یہ کچھ HTML کوڈ میں گزشتہ کر سکتے ہیں اور اسے لوڈ.
  • (آپ کو صرف "نقشہ" کے بٹن پر کلک کرنے کے بعد دیکھ سکتے ہیں کہ) "لوڈ" کے بٹن پر کلک کرنے سے، textarea میں موجود HTML کوڈ تصویر پر سائز میں ترجمہ کیا جائے گا.

آپ مندرجہ ذیل لنک کو اس آلے کی مکمل دستی سے مشورہ کر سکتے ہیں: آن لائن دستی

آپ کو کوئی سوالات ہیں، تو صرف ایک تبصرہ چھوڑ دو یا مجھے ایک ای میل ڈراپ!


ڈاؤن لوڈ، اتارنا
اس زمرے میں دیگر اجزاءاس مصنف کے تمام اجزاء
تبصرہاکثر سوالات اور جوابات سے پوچھا

پراپرٹیز

پیدا کیا:
10 اکتوبر 12

آخری اپ ڈیٹ:
N / A

اعلی قرارداد:
نہیں

ہم آہنگ براؤزر:
فائر فاکس، اوپرا، کروم

فائلیں:
جاوا اسکرپٹ جے ایس، ایچ ٹی ایم ایل، سی ایس ایس

سافٹ ویئر ورژن:
HTML5

مطلوبہ الفاظ

ای کامرس, ای کامرس, تمام اشیاء, اپلی کیشن, علاقے, کینوس, دائرے, محدد, HTML5, تصویر, نقشہ, Mapper کے, متعدد, RECT, شکل, ہدف, آلہ, زوم