HTML DOM BorderImageSource প্রপার্টিটি একটি উপাদানের জন্য বর্ডার ইমেজ হিসাবে ব্যবহার করা ছবির উৎস সেট বা ফেরানোর জন্য ব্যবহৃত হয়।
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার ইমেজসোর্স প্রপার্টি −
সেট করা হচ্ছেobject.style.borderImageSource = "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="The border image is now changed";
}
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
"চেঞ্জ বর্ডার ইমেজ" ক্লিক করলে বোতাম -
উপরের উদাহরণে -
আমরা "DIV1" আইডি সহ একটি ডিভি তৈরি করেছি যেটির সাথে সংশ্লিষ্ট CSS শৈলী প্রয়োগ করা হয়েছে এবং এতে কিছু পাঠ্য রয়েছে। আমরা css স্টাইলে বর্ডার-ইমেজ-সোর্স প্রপার্টি ব্যবহার করে বর্ডার ইমেজ নির্দিষ্ট করেছি এবং ইমেজ ইউআরএল প্রোপার্টি ভ্যালু হিসেবে নির্দিষ্ট করেছি −
#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()">Change Border Image</button>
changeBorderImage() getElementById() পদ্ধতি ব্যবহার করে DIV1 উপাদান পায় এবং এর বর্ডারImageSource সম্পত্তির মান পায়। এটি তারপর url পদ্ধতিতে url মান নির্ধারণ করে এটিকে চিত্র url নির্ধারণ করে। তারপরে এটি তার অভ্যন্তরীণ এইচটিএমএল প্রপার্টি -
ব্যবহার করে আইডি "নমুনা" সহ অনুচ্ছেদে এই পরিবর্তনটি নির্দেশ করে অভিপ্রেত বার্তাটি প্রদর্শন করে।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="The border image is now changed";
} 