এই পোস্টটি আপনাকে শেখাবে:
- HTML চিত্র মানচিত্র কি?
- এইচটিএমএল ডকুমেন্টে ইমেজ ম্যাপ কিভাবে তৈরি করবেন?
- অন্য পৃষ্ঠার সাথে লিঙ্কযুক্ত একটি চিত্র মানচিত্র কীভাবে তৈরি করবেন?
HTML চিত্র মানচিত্র কি?
ছবির মানচিত্র হল একটি ছবি যেখানে ক্লিক করা যায়। HTML এ একটি চিত্র মানচিত্র তৈরি করতে, ' <মানচিত্র> ” উপাদান ব্যবহার করা হয়। তাছাড়া এক বা একাধিক “ <এলাকা> এলাকাগুলি নির্দিষ্ট করতে '
বাক্য গঠন
একটি HTML নথিতে চিত্র মানচিত্র নির্দিষ্ট করার সিনট্যাক্স নীচে উল্লেখ করা হয়েছে:
< img src = 'images/img1.jpg' সবকিছু = 'ল্যাপটপ' ব্যবহার মানচিত্র = '#ক্লিকস্পেস' >
< মানচিত্র নাম = 'ক্লিকস্পেস' >
< এলাকা আকৃতি = 'ঠিক' স্থানাঙ্ক = '224,37,422,312' href = 'laptop.html' >
< / মানচিত্র >
দ্য ' ” উপাদান নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে সংজ্ঞায়িত করা হয়েছে:
- ' src ” চিত্রের পথ সুনির্দিষ্ট করে।
- ' সবকিছু ” যখন একটি ছবি লোড হতে পারে না তখন একটি বিকল্প পাঠ্য দেখায়৷
- ' ব্যবহার মানচিত্র ” ছবির এলাকাগুলিকে ক্লিকযোগ্য করার জন্য নির্দিষ্ট করা হয়েছে। একটি লিঙ্ক তৈরি করতে, এর মান অবশ্যই “
দ্য ' <মানচিত্র> নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে উপাদান যুক্ত করা হয়েছে:
- ' আকৃতি 'একটি HTML এর এলাকার আকার নির্দিষ্ট করে' <মানচিত্র> ' উপাদান।
- ' স্থানাঙ্ক ” বৈশিষ্ট্য ক্লিকযোগ্য এলাকার স্থানাঙ্ক সংজ্ঞায়িত করে।
- ' href ” অ্যাট্রিবিউট উৎসের ইউআরএল নির্ধারণ করে।
এইচটিএমএল ডকুমেন্টে ইমেজ ম্যাপ কিভাবে তৈরি করবেন?
একটি HTML নথিতে একটি চিত্র মানচিত্র তৈরি করতে, প্রদত্ত নির্দেশাবলী দেখুন:
- HTML-এ, একটি যোগ করুন ' ' উপাদান, এবং একটি ক্লাস বরাদ্দ করুন ' চিত্র-মানচিত্র ”
- এই ডিভের মধ্যে একটি যোগ করুন '
উপরোক্ত-আলোচিত বৈশিষ্ট্যগুলির সাথে যুক্ত একটি চিত্র যুক্ত করার উপাদান।
- তারপর, একটি HTML যোগ করুন ' <মানচিত্র> ' উপাদান এবং এটি বরাদ্দ করুন ' ক্লিকস্পেস 'নাম।
- উল্লেখ্য যে ' ব্যবহার মানচিত্র 'অ্যাট্রিবিউটের নাম বরাদ্দ করা হয়েছে' #ক্লিকস্পেস 'এর দিকে ইশারা করে' নাম '
- এর ভিতরে, যোগ করুন ' <এলাকা> ” উপরে বর্ণিত বৈশিষ্ট্যের সাথে ট্যাগ করুন:
< div ক্লাস = 'ছবি-মানচিত্র' >
< img src = 'images/img1.jpg' সবকিছু = 'ল্যাপটপ' ব্যবহার মানচিত্র = '#ক্লিকস্পেস' >
< মানচিত্র নাম = 'ক্লিকস্পেস' >
< এলাকা আকৃতি = 'ঠিক' স্থানাঙ্ক = '224,37,422,312' href = 'laptop.html' >
< / মানচিত্র >
< / div >ছবির আকার সামঞ্জস্য করতে CSS বিভাগের দিকে যাওয়া যাক।
CSS-এ স্টাইল “
”ব্যবহার করুন ' .ছবি-মানচিত্র 'এক্সেস করার জন্য ক্লাস'
” উপাদান এবং নিম্নলিখিত CSS বৈশিষ্ট্য প্রয়োগ করুন: .ছবি-মানচিত্র {
প্রস্থ : 700px;
margin: car;
}এখানে উল্লিখিত CSS বৈশিষ্ট্যগুলির বর্ণনা রয়েছে:
- দ্য ' প্রস্থ ' সম্পত্তি div উপাদানের প্রস্থ সেট করে।
- দ্য ' মার্জিন ” সম্পত্তি উপাদানের চারপাশে আরও জায়গা যোগ করে।
স্টাইল 'img' উপাদান
.image-map img {
প্রস্থ : 100 %;
}দেখুন, এলাকার স্থানাঙ্কগুলি “এ নির্দিষ্ট করা হয়েছে স্থানাঙ্ক ” বৈশিষ্ট্য এখন ক্লিকযোগ্য:
পরবর্তী বিভাগে, আমরা শিখব কিভাবে চিত্র মানচিত্রটিকে অন্য উৎসের সাথে লিঙ্ক করতে হয়।
অন্য পৃষ্ঠার সাথে লিঙ্কযুক্ত একটি চিত্র মানচিত্র কীভাবে তৈরি করবেন?
এক্সটেনশন সহ আরেকটি HTML পৃষ্ঠা তৈরি করুন “ .html 'নিচে উল্লিখিত পদক্ষেপগুলি অনুসরণ করে:
- আমাদের ক্ষেত্রে, আমরা এটির নাম দিই ' laptop.html ”
- একটি div উপাদান যোগ করুন এবং এটি একটি ক্লাস বরাদ্দ করুন ' laptop-img ”
- তারপরে, ' ব্যবহার করে একটি চিত্র রাখুন
' উপাদান এবং সহযোগী ' src ' এবং ' প্রস্থ ” গুণাবলী।
- পরবর্তী, ব্যবহার করে একটি অনুচ্ছেদ নির্দিষ্ট করুন ' 'উপাদান:
< img src = '/images/laptop.jpg' প্রস্থ = '400px' >
< পি >একটি ল্যাপটপ একটি পোর্টেবল কম্পিউটার যা বিভিন্ন সেটিংসে সরানো এবং ব্যবহার করা যায়।< / পি >
< / div >সিএসএস-এ, নিম্নলিখিত সিএসএস বৈশিষ্ট্যগুলি উল্লেখ করুন “ laptop-img 'শ্রেণী:
ল্যাপটপ-আইএমজি {
প্রস্থ : 500px;
margin: car;
}আউটপুট
এখন, আমরা লিঙ্ক করব ' laptop.html 'একটি চিত্রের পৃষ্ঠা' <এলাকা> ” প্রথম পৃষ্ঠার উপাদান। এটি করতে, পৃষ্ঠার URL উল্লেখ করুন “ href ' ' উপাদানের বৈশিষ্ট্য নিচে দেখানো হয়েছে:
< এলাকা আকৃতি = 'ঠিক' স্থানাঙ্ক = '310,57,590,470' href = 'laptop.html' >আউটপুট
আমরা সফলভাবে শিখেছি যে চিত্র মানচিত্রগুলি কী এবং কীভাবে সেগুলি অন্যান্য উত্সের সাথে সংযুক্ত।
উপসংহার
এইচটিএমএল ' <মানচিত্র> ” উপাদানটি একটি চিত্র মানচিত্র বা ক্লিকযোগ্য এলাকা সহ একটি চিত্র তৈরি করতে ব্যবহার করা হয়। চিত্রের ক্লিকযোগ্য এলাকাগুলিকে সংজ্ঞায়িত করতে, এক বা একাধিক ' <এলাকা> ' ট্যাগগুলি '
- এই ডিভের মধ্যে একটি যোগ করুন '