এইচটিএমএল ম্যাপিং ইমেজ হল একটি ক্লায়েন্ট-সাইড ইমেজ-ম্যাপ যেখানে ক্লিকযোগ্য এলাকা রয়েছে যা একটি HTML নথিতে হাইপারলিঙ্ক হিসেবে কাজ করে। মানচিত্রের মধ্যে সম্পর্ক তৈরি করতে এবং img HTML উপাদান মানচিত্রের নামের বৈশিষ্ট্য উপাদানটি img ব্যবহারকারীম্যাপ বৈশিষ্ট্যের সাথে যুক্ত।
সিনট্যাক্স
নিচের সিনট্যাক্স −
<img src=”” alt=”’ usemap=”#name_value”> <map name=”name_value”> <area shape=”” coords=”” href=”” alt=”’> <area shape=”” coords=”” href=”” alt=”’> </map>
আসুন HTML ম্যাপিং ইমেজ-
এর একটি উদাহরণ দেখিউদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>HTML Mapping Image</h1>
<img src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg" alt="Learn Hadoop" usemap="#hadoopImg">
<map name="hadoopImg">
<area shape="rect" coords="0,0,400,100" alt="Hadoop Logo" href="https://www.tutorialspoint.com/hadoop/images/hadoop.jpg" width="100" height="100">
</map>
<p>Click on the above logo</p>
</body>
</html> আউটপুট
এইচটিএমএল ম্যাপিং ইমেজ কিভাবে কাজ করে তা পর্যবেক্ষণ করতে ছবিতে Hadoop-এর লোগো অংশে (হাতি) ক্লিক করুন−
