<area>: HTML এরিয়া উপাদান (The HTML Area element)
HTML উপাদানটি আসলে একটি বৈশিষ্ট্য নয় বরং একটি স্বতন্ত্র উপাদান যা একটি চিত্র বা একটি ক্লায়েন্ট-সাইড চিত্র মানচিত্রের মধ্যে ক্লিকযোগ্য এলাকাগুলিকে সংজ্ঞায়িত করার জন্য উপাদানের সাথে একত্রে ব্যবহৃত হয়। এই ক্লিকযোগ্য এলাকা, “হটস্পট” নামে পরিচিত, বিকাশকারীদের ইন্টারেক্টিভ ইমেজ-ভিত্তিক নেভিগেশন, ইমেজ-ভিত্তিক ফর্ম এবং আরও অনেক কিছু তৈরি করতে দেয়।
Methods or how to calculate coords?
cords=”left, top, right, bottom”
Some examples of shapes:
The clickable area can be “rect” (rectangle), “circle” (circle), or “poly” (polygon).
rect (rectangle): calculate it – 1. Outer part 2. The inner part
x-axis and y-axis
circle (circle): calculate it – 1. Outer part 2. Inner part at last radius
x axis and y axis and radius
poly (polygon): For poly or pentagon or others shape calculate it – 1. Outer part 2. Inner part
x-axis and y-axis and number of angle
x-y,x-y,…xn,xn.
How to calculate an image coords?
open the picture with a paint focus mouse on the side of the image you can see the value below the left side of the paint.
Example: <area shape="circle" coords="100,100,100" href="world.html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<!--Need to add a image which is combination of others images-->
<img src="desktop/college.jpg" usemap="map">
<map name="-map">
<!--This cords or destance inner images position from main image (It is not same for all)-->
<area shape="poly" title="polygon" coords="19,28,222,228,253,55,58,25" />
<area shape="circle" title="Circle" coords="301,132,96" />
</map>
</body>
</html>