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

تگ image map چیست؟

در حقیقت برای استفاده از تگ <map> می بایست لینکی مابین تگ <img> و تگ <map> برقرار سازیم.تگ image map در ایرناک تگ image map در ایرناک

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

برای روشن شدن این مطلب کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
         <head>
        <title>Irnak</title>
    </head>
         <body>
        <img src="/images/image.jpg" usemap="#mymap" />
        <map name="mymap">
            <area shape="circle" coords="50, 50, 30" href="https://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 استفاده می کنیم که مسئول لینک دادن به آدرس مد نظر است که در این مثال آدرس کامل سایت گوگل در نظر گرفته شده است:

 تگ image map چیست؟

تگ image map چیست؟

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

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

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

تگ image map چیست؟

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

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

بازدید : 5,543 بار
تگ image map
5.0
out of
5
(
2
) votes

نوشتن نظرات

توجه : ارسال پیام های توهین آمیز به هر شکل و با هر ادبیاتی دور از فرهنگ ایرانی ما است لذا از ارسال اینگونه پیام ها جدا خودداری فرمایید.


تصویر امنیتی

کاربران آنلاین : 3,700