HTML DOM এরিয়া অবজেক্ট

এইচটিএমএল ডম এরিয়া অবজেক্টটি এইচটিএমএলে ইমেজ ম্যাপের সাথে যুক্ত। এলাকাটি মূলত চিত্র মানচিত্রের ভিতরে ক্লিকযোগ্য এলাকা প্রতিনিধিত্ব করে।

ইমেজ অবজেক্ট আমাদেরকে অবজেক্টের মধ্যে উপাদান তৈরি এবং অ্যাক্সেস করতে সাহায্য করে। আমরা মানচিত্রের ভিতরে ক্লিকযোগ্য অঞ্চল পরিবর্তন করতে পারি বা ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে চিত্র মানচিত্রের আকার ইত্যাদি পরিবর্তন করতে পারি। এটি এলাকা উপাদানের ভিতরের লিঙ্কটি পরিচালনা করতেও ব্যবহার করা যেতে পারে

সম্পত্তি

এরিয়া অবজেক্ট -

-এর জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি রয়েছে৷ ৷

মান	বিবরণ
alt	alt অ্যাট্রিবিউট মান সেট করতে বা ফেরত দিতে।
কর্ডস	একটি এলাকার কর্ড বৈশিষ্ট্য সেট বা ফেরত দিতে।
হ্যাশ	href অ্যাট্রিবিউট মানের অ্যাঙ্কর অংশ সেট করতে বা ফেরত দিতে।
হোস্ট	href অ্যাট্রিবিউট মানের হোস্টনাম এবং পোর্ট উভয় অংশ সেট করতে বা ফেরত দিতে।
হোস্টনাম	href অ্যাট্রিবিউট মানের হোস্টনাম অংশ সেট করতে বা ফেরত দিতে।
href	একটি এলাকার href এট্রিবিউটের মান সেট করতে বা ফেরত দিতে।
noHref	একটি এলাকার nohref বৈশিষ্ট্যের মান সেট করতে বা ফেরত দিতে। HTML5-এ অপ্রচলিত৷
উৎপত্তি	href অ্যাট্রিবিউট মানের প্রোটোকল, হোস্টনাম এবং পোর্ট অংশ ফেরত দিতে।
পাসওয়ার্ড	href অ্যাট্রিবিউট মানের পাসওয়ার্ড অংশ সেট করতে বা ফেরত দিতে।
পথের নাম	href অ্যাট্রিবিউট মানের পাথনেম অংশ সেট করতে বা ফেরত দিতে।
পোর্ট	href অ্যাট্রিবিউট মানের পোর্ট অংশ সেট করতে বা ফেরত দিতে।

উদাহরণ

−

এরিয়া অবজেক্টের একটি উদাহরণ দেখা যাক

<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
   function myWonder() {
      var x = document.createElement("AREA");
      x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
      x.setAttribute("shape", "circle");
      x.setAttribute("coords", "124,58,16");
      document.getElementById("WonderWorld").appendChild(x);
      document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
      you can now click on Maya City.";
   }
</script>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM এরিয়া অবজেক্ট

ক্লিক করার পর IT বাটনে ক্লিক করুন -

HTML DOM এরিয়া অবজেক্ট

এখন আপনি যখন "মায়া শহর" এ ক্লিক করেন, এটি আপনাকে তাদের উইকিপিডিয়া পৃষ্ঠায় নিয়ে যাবে।

উপরের উদাহরণে -

আমরা ট্যাগ ব্যবহার করে একটি চিত্র অন্তর্ভুক্ত করেছি এবং এর প্রস্থ, উচ্চতা এবং আইডি নির্দিষ্ট করেছি৷

৷

<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

তারপরে আমরা একটি খালি মানচিত্র তৈরি করেছি যেখানে আমরা একটি চিত্র, এলাকা এবং অন্যান্য জিনিসগুলি পরে যুক্ত করব -

<map id="WonderWorld" name="7Wonders"></map>

তারপরে আমরা CLICK IT নামে একটি বোতাম তৈরি করেছি যা myWonder() ফাংশনটি চালাবে।

<button onclick="myWonder()">CLICK IT</button>

myWonder() ফাংশনটি প্রথমে একটি উপাদান তৈরি করে এবং এটি পরিবর্তনশীল x এ বরাদ্দ করে। এটিতে বিভিন্ন গুণাবলী যেমন href, আকৃতি এবং কর্ড সেট করুন। শেষ পর্যন্ত আমরা চাইল্ড নোড হিসাবে ইমেজ ম্যাপে ভেরিয়েবল x এর সাথে যুক্ত এলিমেন্ট যোগ করি এবং এরিয়া এলিমেন্টও ডিসপ্লে করি এবং এখন আপনি innerHTML −

ব্যবহার করে আইডি "Sample" সহ প্যারাগ্রাফের ভিতরে “Maya city”-এ ক্লিক করতে পারেন।

function myWonder() {
   var x = document.createElement("AREA");
   x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city ");
   x.setAttribute("shape", "circle");
   x.setAttribute("coords", "124,58,16");
   document.getElementById("WonderWorld").appendChild(x);
   document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
   you can now click on Maya City.";
}