Jassif Team Institution

এইচটিএমএল চিত্র মানচিত্র

আপনি HTML চিত্র মানচিত্র ব্যবহার করে একটি ছবিতে ক্লিকযোগ্য এলাকা তৈরি করতে পারেন।

চিত্র 1: মৌলিক চিত্র মানচিত্রের উদাহরণ (img2.png)

ছবি মানচিত্র কিভাবে কাজ করে?

ছবির মানচিত্রের পিছনের ধারণাটি হল আপনি ছবিতে যেখানে ক্লিক করবেন তার উপর নির্ভর করে বিভিন্ন ক্রিয়া সম্পাদন করা।

একটি চিত্র মানচিত্র তৈরি করতে, আপনার একটি চিত্র এবং কিছু HTML কোডের প্রয়োজন যা ক্লিকযোগ্য অঞ্চলগুলিকে বর্ণনা করে৷

চিত্র 2: কম্পিউটার, ফোন, কফি কাপ - ক্লিকযোগ্য এলাকা (img3.png)

উদাহরণ কোড

উপরের চিত্র মানচিত্রের জন্য HTML উত্স কোড:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

চিত্র 3: HTML কোডের কাঠামো (img4.png)

আকৃতির ধরন

আপনাকে অবশ্যই ক্লিকযোগ্য এলাকার আকৃতি নির্ধারণ করতে হবে এবং আপনি এই মানগুলির মধ্যে একটি বেছে নিতে পারেন:

ফরম্যাট = "রিক্ট" (আয়তক্ষেত্র)

shape="rect"-এর স্থানাঙ্কগুলি জোড়ায় আসে, একটি x-অক্ষের জন্য এবং একটি y-অক্ষের জন্য।

চিত্র 4: আয়তক্ষেত্রের জন্য স্থানাঙ্ক (img5.png)

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

বিন্যাস = বৃত্ত"

প্রথমে বৃত্তের কেন্দ্রের স্থানাঙ্কগুলি সন্ধান করুন:

চিত্র 5: বৃত্তাকার আকৃতির জন্য স্থানাঙ্ক (img6.png)

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

shape="poly" (বহুভুজ)

shape="poly"-এ একাধিক স্থানাঙ্ক বিন্দু রয়েছে, যা সরলরেখা দ্বারা গঠিত একটি আকৃতি তৈরি করে।

চিত্র 6: বহুভুজ আকৃতির উদাহরণ (img7.png)

ইমেজ ম্যাপ এবং জাভাস্ক্রিপ্ট

ক্লিকযোগ্য এলাকাটি একটি জাভাস্ক্রিপ্ট ফাংশনও ট্রিগার করবে।

এলাকায় ক্লিক করার সময় একটি জাভাস্ক্রিপ্ট ফাংশন চালানোর জন্য, <area> উপাদানটিতে একটি ক্লিক ইভেন্ট যোগ করুন:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

চিত্র 7: জাভাস্ক্রিপ্টের সাথে ইন্টিগ্রেশন (img8.png)

অধ্যায়ের সারাংশ

চিত্র 8: চিত্র গ্রাফ তত্ত্বের সারাংশ (img9.png)

• একটি চিত্র মানচিত্র সংজ্ঞায়িত করতে HTML <map> উপাদান ব্যবহার করুন
• চিত্র মানচিত্রে ক্লিকযোগ্য এলাকা নির্ধারণ করতে HTML <area> উপাদান ব্যবহার করুন
• ছবির মানচিত্রের দিকে নির্দেশ করার জন্য <img> উপাদানটির HTMLusemapবৈশিষ্ট্য ব্যবহার করুন

অনুশীলন করুন

চিত্র 9: প্রশিক্ষণের উদাহরণ (img10.png)

এইচটিএমএল ইমেজ ট্যাগ

চিত্র 10: HTML ইমেজ ট্যাগের জন্য রেফারেন্স (img11.png)

সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।

ইমেজ ম্যাপিং অ্যাপ্লিকেশন

বিভিন্ন শিল্পে ইমেজ ডায়াগ্রাম কীভাবে ব্যবহার করা হয় তার উদাহরণ:

একটি মৌলিক উদাহরণ

img2.png -

কর্মক্ষেত্রের মানচিত্র

img3.png -

কোড গঠন

img4.png - HTML

আয়তক্ষেত্রাকার আকৃতি

img5.png -

বৃত্তাকার আকৃতি

img6.png -

বহুভুজ আকৃতি

img7.png -

মনে রাখার জন্য:ছবি ডায়াগ্রামগুলি ওয়েবসাইট, শিক্ষামূলক উপকরণ, পণ্যের ক্যাটালগ এবং গেমগুলিতে ব্যাপকভাবে ব্যবহৃত হয়।

সর্বোত্তম অনুশীলন