جلسه ی پنجاهم: تگ Area در HTML

تگ Area در HTML

در جلسات پیش در مورد تگ IMG صحبت نموده ایم. (برای دیدن آموزش تگ IMG کلیک کنید) در این جلسه می خواهیم درباره ی تگ Area در HTML و کاربرد آن صحبت نماییم. (برای دیدن آموزش HTML به زبان ساده کلیک کنید)

 

تگ map در HTML چیست؟

شاید با خود فکر کنید که تگ map چه ربطی به این قضیه دارد. باید بگوییم که درون تگ map از تگ Area استفاده می شود. از این تگ برای نشان دادن یک نقشه که معمولا در قالب عکس می باشد استفاده می کنیم. شاید از خود بپرسید که چگونه می توانیم دو تگ img و map را به همدیگر متصل نماییم.

برای اینکه بخواهیم دو تگ img و map را به یکدیگر متصل نماییم باید از حالت Usemap در  تگ IMG و از Name در درون تگ Map باید استفاده کنیم. برای اینکه بدانید چگونه باید از این حالات استفاده کنید به کد زیر توجه کنید:


<img src="image/img.jpg" alt="#" usemap="#kamyabiha">

<map name="kamyabiha">

...

</map>

همانطور که مشاهده می کنید از یک اسم یکسان برای متصل کردن این دو به یک دیگر استفاده می کنیم. زمانی که می خواهیم از حالت Usemap استفاده کنیم باید قبل از آن از # استفاده کنیم.

 

تگ Area در HTML چیست؟

به وسیله ی تگ Area در HTML می توانیم قسمتی را عکس مورد نظر خود را به وسیله ی مختصات مشخص نموده و بگوییم که با کلیک کاربر در این منطقه یک صفحه یا عکس و در کل یک محتویات دیگر به آن نشان داده شود. شاید به خود فکر کنید که چگونه باید مختصات و شکل یک منطقه را از طریق کد به سیستم بفهمانیم؟؟ برای فهمیدن جواب این سلام با ما همراه باشید.

در تگ Area در HTML چند حالت وجود دارد که به کمک آن ها می توان شکل و مختصات مورد نظر خود را در سیستم وارد کنیم. از حالت Shape می توان برای تعیین شکل جسم و از حالت coords می توان برای نوشتن مختصات جسم استفاده نمود. سپس از طریق ویژگی Href می توان آدرس صفحه ی مورد نظر خود را وارد کنیم تا با کلیک کردن به آن صفحه برود. از آنجایی که ما اشکال هندسی متفاوتی داریم نحوه ی مختصات نویسی در این اجسام را به صورت جدا گانه در ادامه ی همین آموزش توضیح می دهیم.

 

یک مثال برای تگ Area در HTML

تگ Area در HTML

برای اینکه بتوانیم مختصات یک شکل را بر روی عکس تشخیص دهیم باید از برنامه ی Paint (همون نقاشی) استفاده کنیم و عکس مورد نظر خود را درون آن قرار دهیم. زمانی که ماوس را بر روی عکس تکان می دهیم در قسمت پایین و سمت چپ صفحه دو عدد نشان داده می شوند که اولی مختصات در راستای محور X و دومی در راستای محور Y می باشد.

 

شکل مستطیل

به عکس بالا دقت کنید ابتدا از ساده ترین شکل یعنی مربع شروع می کنیم. البته دقت داشته باشید که اشکال مستطیل و یا مربع شبیه هم هستند. زمانی که جسم ما مستطیلی باشد حالت Shape را بر روی ویژگی Rect تنظیم کرده و سپس مختصات مورد نظر خود را درون قسمت Coords می نویسیم. به نمونه کد زیر توجه کنید:


<img src="image/img4.jpg" alt="#" usemap="#kamyabiha">

<map name="kamyabiha">

<area shape="rect" coords="0,633,371,999" href="#">

</map>

در کد بالا اگر دقت داشته باشید متوجه می شوید که چهار عدد نوشته شده است. این چهار عدد دو مختصات می باشد. دو عدد اول مختصات بالاترین نقطه ی جسم در سمت چپ و دو عدد دوم مختصات پایین ترین نقطه در سمت راست می باشد. به طور کلی کلید ما برای نوشتن مختصات در اشکال مستطیلی به شکل زیر است:


coords="left,top,right,bottom"

شکل دایره

شکل وسطی ما دایره می باشد. زمانی که شکل ما دایره ای شکل باشد حالت Shape را بر روی ویژگی Circle تنظیم می کنیم و سپس مختصات آن را وارد می کنیم. زمانی که شکل ما دایره یا شکل باشد سه عدد داریم. دو عدد اول مختصات مرکز دایره بوده و عدد سوم شعاع آن می باشد. به نمونه کد زیر دقت کنید:


<img src="image/img4.jpg" alt="#" usemap="#kamyabiha">

<map name="kamyabiha">

<area shape="circle" coords="500,500,129" href="#">

</map>

اشکال چند ضلعی

اگر به اشکال بالا دقت کنید متوجه می شوید که تعداد اضلاع خاصی ندارند و حتی شکل خاصی هم ندارند. به این شکل ها چند ضلعی می گوییم و مقدار Shape آن ها را Poly قرار می دهیم. سپس مختصات آن را وارد می کنیم. در چند ضلعی ها تعداد اعداد در مختصات اهمیتی ندارند و هر چند تا که بخواهیم می توانیم مختصات بنویسیم. دقت داشته باشید که در چند ضلعی ها هر چه تعداد مختصات بیشتر شود منطقه ی مورد نظر ما دقیق تر است. به نمونه کد زیر دقت کنید:


<img src="image/img4.jpg" alt="#" usemap="#kamyabiha">

<map name="kamyabiha">

<area shape="poly" coords="999 504,712 670,817 732,712 792,830 863,712 930,830 999,999 999" href="#">

<area shape="poly" coords="0 0,410 0,406 57,389 129,367 184,343 224,307 271,251 323,199 359,143 384,75 404,27 408,0 410" href="#">

</map>

اگر به نمونه کد بالا دقت کنید متوجه می شوید که اعداد به صورت دو تایی می باشند. عدد اول مقدار X و عدد دوم مقدار Y می باشد. هر کدام از مختصات نیز با کاما (,  ) از یکدیگر جدا می شوند. عکس پایین خروجی تمام کد های بالا به صورت یک جا می باشد یعنی زمانی که بر روی همه ی آن ها کلیک شود شما با چنین شکلی رو به رو خواهید شد.

تگ Area در HTML

 

خلاصه مطلب

  1. از تگ map برای نشان دادن یک نقشه که معمولا در قالب عکس می باشد استفاده می کنیم.
  2. برای اینکه بخواهیم دو تگ img و map را به یکدیگر متصل نماییم باید از حالت Usemap در تگ IMG و از Name در درون تگ Map باید استفاده کنیم.
  3. به وسیله ی تگ Area در HTML می توانیم قسمتی را عکس مورد نظر خود را به وسیله ی مختصات مشخص نموده و بگوییم که با کلیک کاربر در این منطقه یک صفحه یا عکس و در کل یک محتویات دیگر به آن نشان داده شود.
  4. از حالت Shape می توان برای تعیین شکل جسم و از حالت coords می توان برای نوشتن مختصات جسم استفاده نمود.
  5. برای اینکه بتوانیم مختصات یک شکل را بر روی عکس تشخیص دهیم باید از برنامه ی Paint (همون نقاشی) استفاده کنیم.
  6. زمانی که جسم ما مستطیلی باشد حالت Shape را بر روی ویژگی Rect تنظیم می کنیم. مختصات مورد نظر ما در این حالت متشکل از چهار عدد می باشد که به ترتیب سمت چپ، بالا، راست پایین را مشخص میکند.
  7. زمانی که شکل ما دایره ای شکل باشد حالت Shape را بر روی ویژگی Circle تنظیم می کنیم. زمانی که شکل ما دایره یا شکل باشد سه عدد داریم. دو عدد اول مختصات مرکز دایره بوده و عدد سوم شعاع آن می باشد.
  8. در چند ضلعی ها مقدار Shape آن ها را Poly قرار می دهیم. سپس مختصات آن را وارد می کنیم. در چند ضلعی ها تعداد اعداد در مختصات اهمیتی ندارند و هر چند تا که بخواهیم می توانیم مختصات بنویسیم.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها

    محبوب ترین برنامه های این ماه

    برترین مقالات این ماه

    متاسفم مطلبی برای نمایش وجود ندارد