HTML DOM Area অবজেক্ট

HTML DOM Area অবজেক্ট HTML-এ ইমেজ ম্যাপের সাথে যুক্ত। Area মূলত ইমেজ ম্যাপের ভিতরে ক্লিকযোগ্য এলাকাকে প্রতিনিধিত্ব করে।

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

প্রোপার্টি

Area অবজেক্টের জন্য প্রোপার্টিগুলো নিচে দেওয়া হলো:

উদাহরণ

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

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

আউটপুট

এটি নিচের আউটপুট দেবে:

CLICK IT বাটনে ক্লিক করার পর:

এখন আপনি "Maya city" এ ক্লিক করলে, এটি আপনাকে তাদের উইকিপিডিয়া পেজে নিয়ে যাবে।

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

আমরা একটি ইমেজ ট্যাগ ব্যবহার করে একটি ছবি অন্তর্ভুক্ত করেছি এবং এর width, height এবং id নির্দিষ্ট করেছি।

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

তারপর আমরা একটি খালি map তৈরি করেছি যেখানে আমরা পরে ইমেজ, area এবং অন্যান্য জিনিস যোগ করব:

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

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

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

myWonder() ফাংশন প্রথমে একটি AREA এলিমেন্ট তৈরি করে এবং এটিকে x ভেরিয়েবলে অ্যাসাইন করে। এর সেট আট্রিবিউট ব্যবহার করে href, shape এবং coords সেট করে। শেষে x ভেরিয়েবলের সাথে যুক্ত AREA এলিমেন্টটি ইমেজ ম্যাপের চাইল্ড নোড হিসেবে অ্যাপেন্ড করে এবং area এলিমেন্ট তৈরি হয়েছে এবং এখন আপনি "Maya city" এ ক্লিক করতে পারেন বলে id "Sample" যুক্ত প্যারাগ্রাফে innerHTML ব্যবহার করে প্রদর্শন করে।

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."; }