HTML DOM borderImageSource প্রপার্টি একটি এলিমেন্টের বর্ডার হিসেবে ব্যবহৃত হওয়ার জন্য ইমেজের উৎস সেট বা ফেরত দেওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
borderImageSource প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderImageSource = "none|image|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| none | কোনো ইমেজ ব্যবহার করা হবে না। যদি বর্ডার শৈলী নির্দিষ্ট থাকে তবে তা প্রয়োগ হবে। |
| image | বর্ডার হিসেবে ব্যবহৃত होनेवाले ইমেজের পাথ দিতে ব্যবহৃত হয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1 { width: 400px; margin: 15px; padding: 10px; border: 20px solid transparent; border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg"); border-image-slice: 30; } </style> <script> function changeBorderImage(){ document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')"; document.getElementById("Sample").innerHTML="বর্ডার ইমেজ এখন পরিবর্তিত হয়েছে"; } </script> </head> <body> <div id="DIV1">This is some sample text inside div</div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর বর্ডার ইমেজ পরিবর্তন হবে</p> <button onclick="changeBorderImage()">বর্ডার ইমেজ পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বর্ডার ইমেজ পরিবর্তন করুন বাটনে ক্লিক করলে:
উপরোক্ত উদাহরণে:
আমরা "DIV1" আইডি সহ একটি div তৈরি করেছি যার সংশ্লিষ্ট CSS স্টাইল প্রয়োগ করা হয়েছে এবং এতে কিছু টেক্সট আছে। আমরা CSS স্টাইলে border-image-source প্রপার্টি ব্যবহার করে বর্ডার ইমেজ নির্দিষ্ট করেছি এবং ইমেজ URL প্রপার্টি মান হিসেবে দিয়েছি।
#DIV1 { width: 400px; margin: 15px; padding: 10px; border: 20px solid transparent; border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg "); border-image-slice: 30; } <div id="DIV1">This is some sample text inside div</div>
তারপর বর্ডার ইমেজ পরিবর্তন করুন নামে একটি বাটন তৈরি করা হয়েছে যা ক্লিক করলে changeBorderImage() মেথড এক্সিকিউট হবে।
<button onclick="changeBorderImage()">বর্ডার ইমেজ পরিবর্তন করুন</button>
changeBorderImage() মেথড getElementById() মেথড ব্যবহার করে DIV1 এলিমেন্টটি পায় এবং এর borderImageSource প্রপার্টি মান পায়। তারপর এটি url() মেথডে URL মান অ্যাসাইন করে ইমেজ URL অ্যাসাইন করে। এরপর ইচ্ছিত মেসেজ "Sample" আইডি সহ প্যারাগ্রাফে এর innerHTML প্রপার্টি ব্যবহার করে প্রদর্শন করে।
function changeBorderImage(){ document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')"; document.getElementById("Sample").innerHTML="বর্ডার ইমেজ এখন পরিবর্তিত হয়েছে"; }
