এইচটিএমএল ডোম Map অবজেক্ট
Map অবজেক্ট
Map অবজেক্ট এইচটিএমএল <map> এলিমেন্টকে প্রতিনিধিত্ব করে।
Map অবজেক্ট তৈরি
আপনি document.createElement() মেথড ব্যবহার করে <map> এলিমেন্ট তৈরি করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<img src="../../images/planets.gif" width="145" height="126" usemap="#test">
<p><button onclick="myFunc()">ক্লিক করুন</button></p>
<p id="test2"></p>
<script>
function myFunc() {
var a = document.createElement("map");
a.setAttribute("id", "test");
a.setAttribute("name", "map");
document.body.appendChild(a);
var b = document.createElement("area");
b.setAttribute("href", "venus.html");
b.setAttribute("shape", "circle");
b.setAttribute("coords", "124,58,8");
document.getElementById("test").appendChild(b);
document.getElementById("test2").innerHTML = "map তৈরি হয়েছে, আপনি এখন ইমেজের মধ্যে venus এরিয়ায় ক্লিক করতে পারেন।";
}
</script>
</body>
</html>
ফলাফল
Map অবজেক্ট এক্সেস
আপনি getElementById() ব্যবহার করে <map> এলিমেন্টকে এক্সেস করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<img src="../../images/planets.gif" width="145" height="126" alt="Planets" usemap="#test">
<map id="test" name="map">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html">
</map>
<p><button onclick="myFunc()">ক্লিক করুন</button></p>
<p id="test2"></p>
<script>
function myFunc() {
var a = document.getElementById("test").areas.length;
document.getElementById("test2").innerHTML = a;
}
</script>
</body>
</html>
ফলাফল
Map অবজেক্ট কালেকশন
কালেকশন | বর্ননা |
---|---|
areas | একটি ইমেজ-ম্যাপে সকল <area> এলিমেন্টের সকল কালেকশন রিটার্ণ করে। |
images | ইমেজ-ম্যাপের সাথে সম্পর্কিত সকল <img> এবং <object> এলিমেন্টের কালেকশন রিটার্ণ করে। |
Map অবজেক্ট প্রোপার্টি
প্রোপার্টি | বর্ননা |
---|---|
name | একটি ইমেজ-ম্যাপের name এট্রিবিউটের ভ্যালু সেট বা রিটার্ণ করে। |
স্ট্যান্ডার্ড প্রোপার্টিজ এবং ইভেন্ট
প্রোপার্টি | ইভেন্ট |
---|---|
সাপোর্ট করে। এখানে দেখুন | সাপোর্ট করে। এখানে দেখুন |