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

এই ওয়েব ডেভেলপারদের জন্য নির্মিত একটি এইচটিএমএল ইমেজ ম্যাপিং হয়.

টুল HTML5 এর ক্যানভাস ব্যবহার উন্নত করা হয়েছে, তাই এর ব্যবহারের ক্যানভাস সমর্থন করে এমন ব্রাউজার সীমাবদ্ধ, কিন্তু ফাইল এপিআই এর:

IE10 + +, FF3.6 + FF14-, FF18 + + (FF15 FF18 সমস্যা সমাধান করা হবে যে কিছু ক্যানভাস বৈশিষ্ট্য, বাগ 787623, সঙ্গে সমস্যা আছে), Chrome6 + Safari6 + + + Opera11.1

এই ডেভেলপারদের জন্য একটি টুল থেকে আমি একটি ওয়েব ডেভেলপার একটি উপযুক্ত ব্রাউজার চয়ন করতে কোনো সমস্যা হয় যে অনুমান, কারণ, এই একটি বড় সীমাবদ্ধতা নয় যে মনে.

আমি টুল বিকাশ FF14 ব্যবহার করেছেন, তাই এই ভাল choise, কিন্তু টুল Chrome22 এবং Opera12 এছাড়াও পরীক্ষা করা হয়েছে


দ্রষ্টব্য: আপনি যদি লাইভ প্রিভিউ লিঙ্ক দেখতে পারেন যে টুলের, টুল একটি সীমিত সংস্করণ. এই সংস্করণের সাথে আপনি শুধুমাত্র হোম পেজে তালিকাভুক্ত ইমেজ একটি নির্দিষ্ট সেট, লোড করতে পারেন. একটি ইমেজ লোড করার পরে আপনি সব আকার আহরণ করতে পারে, কিন্তু শুধুমাত্র প্রথম 6 আকার এইচটিএমএল কোড তৈরি করা হবে. এই সীমাবদ্ধতা আপনার টুলের সমস্ত কার্যকারিতা পরীক্ষা করতে বাধা দেয় না.


একটি ইমেজ ম্যাপ কি?

একটি ইমেজ ম্যাপ একটি ইমেজ ব্যবহারকারী যোগ্য বিভিন্ন এলাকায় যে একটি 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, Poly এবং বৃত্ত: প্রতিটি এলাকায় 3 মান এক থাকতে পারে যে একটি আকৃতি অ্যাট্রিবিউট, থাকতে হবে. RECT আকৃতি সম্পূর্ণ 2 পয়েন্ট দ্বারা সংজ্ঞায়িত করা হয়, একটি বহু আকৃতি পয়েন্ট একটা ক্রম দ্বারা সংজ্ঞায়িত করা হয় এবং একটি বৃত্ত আকৃতি কেন্দ্র উপস্থাপন করে এমন একটি বিন্দু, এবং একটি ব্যাসার্ধ দ্বারা সংজ্ঞায়িত করা হয়. সমস্ত পয়েন্ট স্থানাঙ্ক একটি দম্পতি দ্বারা সংজ্ঞায়িত করা হয়, ইমেজ উপরের বাঁদিকের অংশে আত্মীয়, পিক্সেলে ব্যক্ত করেন. আকৃতি অ্যাট্রিবিউট আগের আকার সাথে ম্যাপ ইমেজ অংশ পড়ুন যে "ডিফল্ট" মান, থাকতে পারে. আকার মানচিত্রে সংজ্ঞায়িত করা হয়, যা করার জন্য খুবই গুরুত্বপূর্ণ যে, এর পরিবর্তে, একাউন্টে নিন: আপনি ম্যাপ প্রথম আকৃতি হিসেবে "ডিফল্ট" আকৃতি নির্ধারণ করা হলে, এটি সমস্ত পরবর্তী আকার অগ্রাহ্য করবে "ডিফল্ট" কারণ আকৃতি পুরো ছবিটি বোঝায়. আপনি একটি বড় আকৃতির একটি সামান্য আকৃতি নির্ধারণ করতে পারবেন, কিন্তু আপনি তারপর বড় এক প্রথমে একটু আকৃতি নির্ধারণ করতে হবে এবং এই একে অপরকে ওভারল্যাপ যে আকার সঙ্গে এটাও সত্য. 2 আকার ইমেজ এর একটি অংশ ভাগ করে, প্রথম সংজ্ঞায়িত আকৃতি, ধিক্কার জানাই.

আপনি নিজে একটি চিত্র মানচিত্র সেট করতে চান তাহলে আপনি বিভিন্ন আকার নির্ধারণ করতে প্রয়োজনীয় সব পয়েন্ট স্থানাঙ্ক জানা আছে. সম্ভবত এই আপনি বিজ্ঞপ্তি অথবা আয়তক্ষেত্রাকার এলাকায় আছে, বিশেষ করে যদি আপনি ম্যাপ কিছু জায়গায় থাকে তাহলে একটি বড় সমস্যা নয়. কিন্তু আপনি একটি বহুভুজ আকৃতি দিয়ে, বিভিন্ন এলাকায় আছে, নিজে তাদের সেট একটি সহজ টাস্ক না.

ছবিটি ম্যাপার টুল আপনি ইমেজ ব্যবহারকারী যোগ্য এলাকায় যে সংশ্লিষ্ট HTML কোড স্বয়ংক্রিয়ভাবে অনুবাদ করা হবে যে এই ধরনের নির্বাচিত ছবিটি RECT, পলি, এবং বৃত্ত হিসাবে আকার, আঁকতে পারবেন.

প্রদত্ত ছবির আকার আঁকার পরে, আপনি কেবল একটি বোতাম ক্লিক করে HTML কোড উৎপন্ন করতে পারে এবং কোড একটি textarea মধ্যে displayied করা হবে. আপনি HTML কোড কপি করুন এবং আপনার HTML পৃষ্ঠা (গুলি) এটি ব্যবহার করতে পারেন. আপনি বিপরীত প্রক্রিয়া এটিও করতে পারেন: textarea মধ্যে HTML কোড পেস্ট, আপনি এই কোড শুধু একটি বাটন ক্লিক লোড করতে পারেন; এই ছবিটি আকার অনুবাদ করা হবে এবং আপনি তাদের পরিবর্তন নতুন আকার যোগ এবং এইচটিএমএল কোড পুনরায় উৎপন্ন করতে পারে. এই বিপরীত প্রক্রিয়া আপনি একটি আংশিক ম্যাপিং প্রক্রিয়া সংরক্ষণ এবং পরে ইমেজ ম্যাপ চালিয়ে যাওয়ার অনুমতি জন্য উপযোগী হয়. Textarea মধ্যে কোড জেনারেট করার পর, আপনি উড়ে textarea মধ্যে স্থানাঙ্ক পরিবর্তন করতে পারেন এবং এটি পুনরায় লোড: এটা "নিজে" / পজিশনিং নকশা আকৃতি পরিমার্জন দরকারী হয়.

মূল বৈশিষ্টগুলো:

  • আপনি একটি স্থানীয় অথবা দূরবর্তী ইমেজ নির্বাচন করতে পারেন
  • আপনি লক্ষ্য মাপের চিত্র সেট করতে পারেন: এই ছবিটি আপনার HTML পাতায় থাকবে যে মাপ হয়
  • আপনি যে কোনো মুহুর্তে ইমেজ জুম আউট করতে পারেন এবং এই শুধুমাত্র ছবিটি লক্ষ্য মাপের উপর নির্ভর করে যে তৈরি করা হবে যে বাস্তব স্থানাঙ্ক, হস্তক্ষেপ করবে না. জুম বৈশিষ্ট্য আপনি আকার আঁকতে সাহায্য করার জন্য শুধুমাত্র দরকারী.
  • আপনি যেমন "href" অ্যাট্রিবিউট, "Alt" অ্যাট্রিবিউট, "আইডি" এবং "শ্রেণী" গুণাবলী এবং পরিশেষে "টার্গেট" অ্যাট্রিবিউট হিসাবে প্রতিটি আকৃতি জন্য বিভিন্ন পরামিতি, সেট করতে পারেন. আপনি আকৃতি নির্বাচন আছে প্যারামিটার সেট করতে: টুলবারের উপরের বাম তীর নির্বাচন করুন ও আকৃতি ক্লিক আছে একটি আকার নির্বাচন করুন.
  • মানচিত্র "নাম", ডিফল্ট URL এবং লক্ষ্য: আপনি মানচিত্রের জন্য কিছু প্যারামিটার সেট করতে পারেন.
  • আপনি একটি টুল বার থেকে আকৃতি নির্বাচন একটি শেপ তৈরি করতে পারেন.
  • টুলবার থেকে নির্বাচন করার পরে, একটি শেপ তৈরি করার জন্য, আপনি কেবল আপনার আকৃতি শুরু করতে চান যেখানে ইমেজ, উপর মাউস দিয়ে ক্লিক করতে পারেন.
  • আকৃতি একটি বৃত্ত হয়, তাহলে firts পয়েন্ট কেন্দ্র: (ক্লিক করা বা মুক্তি) মাউস সরানোর, আপনি কার্সার অনুসরণ করে একটি বৃত্ত দেখতে পারেন. আবার মাউস ক্লিক বৃত্ত আঁকার বন্ধ করবে.
  • আকৃতি একটি RECT হয় তাহলে. প্রথম পয়েন্ট কোণায় এক. (ক্লিক করা বা মুক্তি) মাউস মুভিং একটি RECT আঁকা হবে. আবার মাউস ক্লিক অঙ্কন বন্ধ হবে.
  • আকৃতি একটি Poly যদি প্রক্রিয়া একটু ভিন্ন: একটি পয়েন্ট নির্ধারণ করা হবে মাউস প্রতিটি ক্লিকের; বর্তমান পয়েন্ট সবসময় সবসময় একটি বদ্ধ আকৃতি Poly তৈরীর firs এক সঙ্গে সংযুক্ত করা হয়; Poly আঁকা বন্ধ করতে মাউসের ডাবল ক্লিক করতে হবে (শেষ পয়েন্ট নির্ধারণ).
  • সব আকার জন্য আপনি তাদের "স্টপ" বাটন (টুলবারের উপরের বাম তীর) উপর ক্লিক করে আঁকা বন্ধ করতে পারেন.
  • আপনি ইমেজ সরিয়ে নেয়া যখন মাউস স্থানাঙ্ক দেখতে পারেন.
  • আপনি সীমানা ব্যবহার করতে পারেন যাতে এটি ইমেজ অংশ হিসাবে আপনি প্রান্ত ছবিটি স্থানাঙ্ক নির্ধারণ চিত্র প্রায় ধূসর-ড্যাশ সীমানা ব্যবহার করতে পারেন: সুতরাং, আপনি আকৃতি আঁকার সময় সীমান্তে ক্লিক করতে পারেন, স্বত্ব এটা হিসাবে ইমেজ অংশ ছিল. আপনি সীমানার উপরের বাঁদিকের অংশে ক্লিক উদাহরণস্বরূপ, যদি আপনি একটি পয়েন্ট নির্ধারণ করা হবে (0, 0) স্থানাঙ্ক. আপনি বাম সীমানা, কোনো স্থানে, আপনি ইত্যাদি, স্থানাঙ্ক (0, Y) একটি পয়েন্ট নির্ধারণ করা হবে
  • আপনি এটি অপসারণ / মাপ পরিবর্তন / ইতিমধ্যে একটি টানা আকৃতি নির্বাচন করুন এবং পরিবর্তন করতে পারেন. এটা মুছে ফেলার জন্য আপনি একটি পেন্সিল নিচে পরিণত শুধুমাত্র একটি আকৃতি নির্বাচন হিসাবে প্রদর্শিত হবে যে টুলবারের "রবার" ব্যবহার করতে হবে.
  • আপনি (এই একটি নকশা হাতিয়ার নয়, তাই আমি রং এর সংখ্যা সীমিত এবং আপনি প্রতিটি আকৃতি জন্য একটি ভিন্ন রঙ চয়ন করতে পারেন) 5 রঙের একটি সেট থেকে আকার কনট্যুর এর রঙ নির্বাচন করতে পারেন.
  • আপনি ইমেজ টানা কিছু আকার আছে, যদি আপনি একটি textarea মধ্যে HTML কোড দেখতে হবে: আপনি যদি টুলবারে "স্টপ" বাটন নির্বাচন করুন এবং কোন আকৃতি নির্বাচিত হয় শুধুমাত্র যখন যে দৃশ্যমান, "মানচিত্র" বাটনে ক্লিক করতে পারেন আপনি এখনও একটি আকৃতি টানা না থাকলে আপনি একটি ফাঁকা textarea দেখতে হবে, কিন্তু আপনি তা কিছু HTML কোড অতীতের পারেন এবং এটি লোড.
  • (আপনি "মানচিত্র" বাটনে ক্লিক করার পর দেখতে পারেন) "লোড" বাটনে ক্লিক করলে textarea মধ্যে HTML কোড ইমেজের আকার অনুবাদ করা হবে.

আপনি নিচের লিঙ্ক এ টুলের সম্পূর্ণ ম্যানুয়াল সঙ্গে পরামর্শ করতে পারেন: অনলাইন ম্যানুয়াল

যদি আপনার কোন প্রশ্ন থাকে, তাহলে শুধু একটি মন্তব্য বা আমাকে একটি ইমেইল ঝরা!


ডাউনলোড করুন
এই বিষয়শ্রেণীতে অন্তর্ভুক্ত অন্যান্য উপাদানএই লেখকের সব উপাদান
মন্তব্যপ্রায়শই জিজ্ঞাসা করা প্রশ্ন এবং উত্তর

বৈশিষ্ট্য

নির্মিত:
10 অক্টোবর 12

সর্বশেষ আপডেট:
N / A

উচ্চ মানের:
না

সামঞ্জস্যপূর্ণ ব্রাউজার:
ফায়ারফক্স, অপেরা, ক্রোম

ফাইল:
জাভাস্ক্রিপ্ট জাতীয়, এইচটিএমএল, সিএসএস

সফ্টওয়্যার সংস্করণ:
HTML5 এর

নাম. মূলশব্দ

ইকমার্স, ইকমার্স, সকল প্রকার, অ্যাপ্লিকেশন, এলাকা, ক্যানভাস, বৃত্ত, তুল্য, HTML5, ভাবমূর্তি, মানচিত্র, ম্যাপার, পলি, RECT, আকৃতি, লক্ষ্য, টুল, জুম্