HTML DOM Image অবজেক্ট একটি HTML ডকুমেন্টের <img> এলিমেন্টকে রিপ্রেজেন্ট করে। জাভাস্ক্রিপ্ট দিয়ে চিত্র (image) তৈরি, পরিবর্তন বা নিয়ন্ত্রণ করার জন্য এই অবজেক্টটি ব্যবহার করা হয়।
সিনট্যাক্স: Image অবজেক্ট তৈরি
document.createElement("IMG");
Image অবজেক্টের প্রধান প্রপার্টি (Properties)
| প্রপার্টি | ব্যাখ্যা |
|---|---|
| alt | alt অ্যাট্রিবিউটের মান পাওয়া ও পরিবর্তন করা যায়। |
| complete | ব্রাউজার চিত্রটি সম্পূর্ণ লোড করেছে কিনা তা বুলিয়ান (true/false) দিয়ে জানায়। |
| crossOrigin | CORS সেটিং পাওয়া ও সেট করা যায়। |
| height / width | চিত্রের উচ্চতা ও প্রস্থের মান পাওয়া ও পরিবর্তন করা যায়। |
| naturalHeight / naturalWidth | চित्रের আসল (original) ডাইমেনশন পাওয়া যায় (শুধু পঠনযোগ্য)। |
| src | চিত্রের সোর্স URL পাওয়া ও পরিবর্তন করা যায়। |
| useMap | usemap অ্যাট্রিবিউটের মান পাওয়া ও পরিবর্তন করা যায়। |
| isMap | সার্ভার-সাইড ইমেজ ম্যাপের অংশ কিনা তা নির্দেশ করে। |
উদাহরণ: জাভাস্ক্রিপ্ট দিয়ে ডাইনামিকভাবে চিত্র তৈরি করা
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
.btn {
background-color: lightblue; border: none; height: 2rem;
border-radius: 50px; width: 60%; margin: 1rem auto; display: block;
}
</style>
</head>
<body>
<h1>DOM Image Object Example</h1>
<button onclick="createImage()" class="btn">Click me to create an image</button>
<script>
function createImage() {
var x = document.createElement("IMG");
x.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
x.setAttribute("alt", "Learn Servlets");
document.body.appendChild(x);
}
</script>
</body>
</html>
আউটপুট
বাটনে ক্লিক করলে পেজে একটি নতুন চিত্র যোগ হবে।
ব্যবহারিক টিপস
naturalWidth/naturalHeightব্যবহার করে চিত্রের আসল সাইজ জানা যায়, যা রেসপন্সিভ ডিজাইনে কাজ দেয়।completeপ্রপার্টি দিয়ে চিত্র লোড হওয়ার পরে কোড চালানো সম্ভব।
