استفاده از map به منظور ایجاد چند ناحیه قابل کلیک در یک عکس در HTML :

استفاده از map در HTML یک روش ساده و کاراست برای ایجاد چند ناحیه قابل کلیک در یک عکس. با استفاده از map، می‌توانید به کاربران اجازه دهید تا با کلیک بر روی ناحیه‌های مختلفی در عکس، به صفحات مختلفی هدایت شوند. در این مقاله، نحوه استفاده از map در HTML برای ایجاد چند ناحیه قابل کلیک در یک عکس را بررسی خواهیم کرد.

1. ایجاد عکس

ابتدا، باید یک عکس را در HTML ایجاد کنید. برای این کار، می‌توانید از تگ `` استفاده کنید. به عنوان مثال، کد زیر یک عکس از یک نقشه را در HTML ایجاد می‌کند:

“`
Map
“`

2. ایجاد map

حالا، برای ایجاد چند ناحیه قابل کلیک در این عکس، باید از تگ `

` استفاده کنید. این تگ باید بلافاصله پس از تگ `` قرار بگیرد. به عنوان مثال:

“`
Map

“`

3. ایجاد ناحیه‌های قابل کلیک

حالا، برای ایجاد ناحیه‌های قابل کلیک در این عکس، باید از تگ `

` استفاده کنید. این تگ باید داخل تگ `

` قرار بگیرد. به عنوان مثال، کد زیر یک ناحیه قابل کلیک را در عکس ایجاد می‌کند:

“`
Map

“`

در این مثال، `shape` نشان می‌دهد که ناحیه قابل کلیک چه شکلی دارد (در اینجا مستطیل است)، `coords` نشان می‌دهد که ناحیه قابل کلیک کجاست، و `href` نشان می‌دهد که با کلیک بر روی این ناحیه قابل کلیک، کاربر به چه صفحه‌ای هدایت می‌شود.

4. ایجاد چند ناحیه قابل کلیک

می‌توانید چند ناحیه قابل کلیک را در یک عکس ایجاد کنید. برای این کار، باید تگ `

` را برای هر ناحیه قابل کلیک اضافه کنید. به عنوان مثال، کد زیر دو ناحیه قابل کلیک را در عکس ایجاد می‌کند:

“`
Map

“`

در این مثال، دو ناحیه قابل کلیک ایجاد شده‌اند. هرکدام دارای مختصات و لینک متفاوتی هستند.

5. استفاده از ناحیه‌های دایره‌ای

علاوه بر مستطیل، می‌توانید از ناحیه‌های دایره‌ای نیز استفاده کنید. به عنوان مثال، کد زیر یک ناحیه دایره‌ای را در عکس ایجاد می‌کند:

“`
Map

“`

در این مثال، `shape` به `circle` تغییر کرده است و مختصات ناحیه قابل کلیک به شکل `(x,y,r)` تعریف شده‌اند. در اینجا، `(100,100)` مرکز دایره است و `50` شعاع آن است.

6. استفاده از ناحیه‌های چند ضلعی

می‌توانید از ناحیه‌های چند ضلعی نیز استفاده کنید. به عنوان مثال، کد زیر یک ناحیه چهارضلعی را در عکس ایجاد می‌کند:

“`
Map

“`

در این مثال، `shape` به `poly` تغییر کرده است و مختصات نقاط ناحیه قابل کلیک به شکل `(x1,y1,x2,y2,…)` تعریف شده‌اند.

7. خلاصه

استفاده از map در HTML یک روش ساده و کاراست برای ایجاد چند ناحیه قابل کلیک در یک عکس. با استفاده از تگ `

` و تگ `

`، می‌توانید به کاربران اجازه دهید تا با کلیک بر روی ناحیه‌های مختلفی در عکس، به صفحات مختلفی هدایت شوند. همچنین، می‌توانید از ناحیه‌های دایره‌ای و چند ضلعی نیز استفاده کنید.

برچسب ها:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *