026-32601

آشنایی با تگ map در زبان اچ تی ام ال (html)

1 1 1 1 1 (4 Votes)

با استفاده از این تگ می توان بخشی هایی از یک تصویر را به نقاط قابل کلیک مبدل ساخت تا کاربر با کلیک بر روی آن نقاط به آدرسی که از پیش تعریف کرده ایم ارجاع داده شود. در حقیقت برای استفاده از تگ <map> می بایست لینکی مابین تگ <img> و تگ <map> برقرار سازیم. در واقع برای تعریف نقاط قابل کلیک روی تصویر می بایست داخل تگ <map> از تگی تحت عنوان <area> استفاده کنیم (لازم به ذکر است که از تگ <area> به هر تعداد که بخواهیم می توانیم روی یک تصویر استفاده کنیم). برای روشن شدن این مطلب کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>
        <img src="/images/image.jpg" usemap="#mymap" />
        <map name="mymap">
            <area shape="circle" coords="50, 50, 30" href="http://www.google.com/" />
        </map>
    </body>
</html>

همانطور که در کد فوق می بینیم، ابتدا با استفاده از تگ <img> تصویری را روی صفحه قرار می دهیم. سپس از دستوری تحت عنوان usemap استفاده کرده و نامی برای آن به صورت دلخواه در نظر می گیریم. در این مثال نام mymap به معنی "نقشه من" در نظر گرفته شده است. توجه داشته باشیم که پیش از نام مد نظر از علامت # استفاده کنیم (لازم به ذکر است که این علامت تحت عناوین Hash Mark و Pound Sign شناخته می شود).
سپس در خط بعد تگ <map> را نوشته به این صورت که دستوری تحت عنوان name برای آن در نظر گرفته و دقیقاً نامی که برای <usemap> مرتبط با تگ <img> در نظر گرفتیم را برای آن در نظر می گیریم با این تفاوت که از علامت # استفاده نمی کنیم.
سپس داخل تگ های <map> و </map> تگی تحت عنوان <area> می نویسیم. کاری که این تگ قرار است انجام دهد این است که ناحیه قابل کلیک کردن را تعریف می کند. دستوری داخل این تگ استفاده می شود تحت عنوان shape که فقط و فقط می تواند سه پارامتر از پیش تعریف شده rect, circle, poly را در خود ذخیره سازد (لازم به ذکر است که کلمه rect مخفف کلمه rectangle به معنی "مستطیل"، کلمه circle به معنی "دایره" و کلمه poly مخفف کلمه polygon به معنی "چند ضلعی" است. اگر بخواهیم ناحیه قابل کلیک مستطیلی شکل باشد باید از پارامتر rect استفاده کنیم، چنانچه بخواهیم ناحیه ای مدور برای کلیک کردن داشته باشیم می بایست از پارامتر circle استفاده کنیم و در نهایت اگر بخواهیم ناحیه ای تعریف کنیم که چند ضعلی باشد مثلا پنج ضلعی می توان از پارامتر poly استفاده کرد).
همانطور که در کد فوق ملاحظه می شود پارامتر circle در نظر گرفته شده است. سپس Attribute یی داریم تحت عنوان coords که مخفف coordinates به معنی "مختصات" می باشد. سه عدد به عنوان مقدار coords در نظر گرفته شده است به طوریکه مقدار اول که 50 است فاصله نقطه قابل کلیک از سمت چپ است، مقدار دوم که 50 است به معنی 50 پیکسل از بالای تصویر است و در نهایت به عدد 30 می رسیم که شعاع دایره فرضی است (در واقع از آنجا که شعاع دایره 30 است پس قطره دایره فرضی ما برابر با 60 پیکسل خواهد بود).
در نهایت از Attribute یی تحت عنوان href استفاده می کنیم که مسئول لینک دادن به آدرس مد نظر است که در این مثال آدرس کامل سایت گوگل در نظر گرفته شده است:

استفاده از تگ map در صفحات html

همانطور که در تصویر فوق ملاحظه می شود، نقطه ای فرضی روی عکس قرار گرفته است که از دید کاربر مخفی است اما اگر کاربر نشانگر موس خود را در آن ناحیه قرار دهد نشانگر موس به یک علامت دست مبدل خواهد شد و بالتبع با کلیک بر روی آن ناحیه به آدرس گوگل یا هر آدرس دیگری که در href تعریف کرده باشیم می رویم (در واقع برای نمایان شدن نقطه فرضی در تصویر فوق رنگ قرمز برای آن در نظر گرفته شده است).
حال چنانچه بخواهیم یک ناحیه مستطیل شکل را انتخاب کنیم نیاز به 4 عدد برای مختصات داریم به طوریکه عدد اول فاصله گوشه بالای سمت چپ مستطیل فرضی را از سمت چپ تصویر و عدد دوم فاصله گوشه بالای سمت چپ مستطیل فرضی را از بالای تصویر را مشخص می کند. عدد سوم عرض مستطیل فرضی و عدد چهارم ارتفاع مستطیل فرضی است. سپس می بایست مقدار Attribute یی تحت عنوان shape را از circle به rect تغییر دهیم. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

    <body>
        <img src="/images/image.jpg" usemap="#mymap" />
        <map name="mymap">
            <area shape="rect" coords="20, 20, 100, 30" href="http://www.google.com/" />
        </map>
    </body>

اکنون پس از به روز رسانی مرورگر خود با تصویر زیر مواجه خواهیم شد:

مختصات مرتبط با مستطیل در تگ map

می بینیم که در تصویر فوق مختصاتی که در کد وارد کردیم به صورت بصری نمایش داده شده اند.



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب