HTML এরিয়া উপাদান (The HTML Area element)

<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

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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--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" />
Scroll to Top