نقشه های تصویری HTML

نقشه‌های تصویری HTML

با نقشه‌های تصویری HTML، می‌توانید مناطق قابل کلیک روی یک تصویر ایجاد کنید.

نقشه‌های تصویری

تگ <map> HTML یک نقشه تصویری را تعریف می‌کند. نقشه تصویری، تصویری است با مناطق قابل کلیک. این مناطق با یک یا چند تگ <area> تعریف می‌شوند.

سعی کنید روی کامپیوتر، تلفن یا فنجان قهوه در تصویر زیر کلیک کنید:

مثال

در اینجا کد منبع HTML برای نقشه تصویری بالا آمده است:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

چگونه کار می‌کند؟

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

برای ایجاد یک نقشه تصویری، به یک تصویر و مقداری کد HTML نیاز دارید که مناطق قابل کلیک را توصیف کند.

تصویر

تصویر با استفاده از تگ <img> درج می‌شود. تنها تفاوت با تصاویر دیگر این است که باید ویژگی usemap را اضافه کنید:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

مقدار usemap با یک علامت هشتگ # شروع می‌شود و به دنبال آن نام نقشه تصویری می‌آید و برای ایجاد رابطه بین تصویر و نقشه تصویری استفاده می‌شود.

نکته: می‌توانید از هر تصویری به عنوان نقشه تصویری استفاده کنید!

ایجاد نقشه تصویری

سپس، یک عنصر <map> اضافه کنید.

عنصر <map> برای ایجاد یک نقشه تصویری استفاده می‌شود و با استفاده از ویژگی الزامی name به تصویر پیوند داده می‌شود

<map name="workmap">

ویژگی name باید همان مقدار ویژگی usemap در <img> را داشته باشد.

مناطق

سپس، مناطق قابل کلیک را اضافه کنید.

یک منطقه قابل کلیک با استفاده از عنصر <area> تعریف می‌شود.

شکل (Shape)

باید شکل منطقه قابل کلیک را تعریف کنید و می‌توانید یکی از مقادیر زیر را انتخاب کنید:

• rect - یک ناحیه مستطیلی را تعریف می‌کند.

• circle - یک ناحیه دایره‌ای را تعریف می‌کند.

• poly - یک ناحیه چندضلعی را تعریف می‌کند.

• default - کل ناحیه را تعریف می‌کند.

همچنین باید مختصاتی را برای قرار دادن منطقه قابل کلیک روی تصویر تعریف کنید.

Shape="rect"

مختصات برای shape="rect" به صورت جفتی (یک برای محور x و یک برای محور y) می‌آیند.

بنابراین، مختصات 34,44 در 34 پیکسل از حاشیه سمت چپ و 44 پیکسل از بالا قرار دارد:

مختصات 270,350 در 270 پیکسل از حاشیه سمت چپ و 350 پیکسل از بالا قرار دارد:

اکنون داده‌های کافی برای ایجاد یک منطقه مستطیلی قابل کلیک داریم:

مثال

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Shape="circle"

برای افزودن یک ناحیه دایره‌ای، ابتدا مختصات مرکز دایره را پیدا کنید: 337,300

سپس شعاع دایره را مشخص کنید: 44 پیکسل

اکنون داده‌های کافی برای ایجاد یک ناحیه دایره‌ای قابل کلیک دارید:

مثال

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

این ناحیه‌ای است که قابل کلیک می‌شود و کاربر را به صفحه "coffee.htm" می‌فرستد:

Shape="poly"

shape="poly" شامل چندین نقطه مختصات است که شکلی با خطوط مستقیم (یک چندضلعی) ایجاد می‌کند. این می‌تواند برای ایجاد هر شکلی استفاده شود. مثلاً یک شکل کروسان! چگونه می‌توانیم کروسان را در تصویر زیر به یک لینک قابل کلیک تبدیل کنیم؟ باید مختصات x و y را برای تمام لبه‌های کروسان پیدا کنیم: مختصات به صورت جفتی (یک برای محور x و یک برای محور y) می‌آیند:

مثال

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

این ناحیه‌ای است که قابل کلیک می‌شود و کاربر را به صفحه "croissant.htm" می‌فرستد:

نقشه تصویری و جاوااسکریپت

یک منطقه قابل کلیک می‌تواند یک تابع جاوااسکریپت را نیز فعال کند. یک رویداد click را به عنصر <area> اضافه کنید تا یک تابع جاوااسکریپت را اجرا کند:

مثال

در اینجا، از ویژگی onclick برای اجرای یک تابع جاوااسکریپت هنگام کلیک روی ناحیه استفاده می‌کنیم:

<map name="workmap">
    <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
    function myFunction() {
        alert("You clicked the coffee cup!");
    }
</script>

خلاصه فصل

• از عنصر HTML برای تعریف یک نقشه تصویری استفاده کنید.

• از عنصر HTML برای تعریف مناطق قابل کلیک در نقشه تصویری استفاده کنید.

• از ویژگی usemap عنصر HTML برای اشاره به یک نقشه تصویری استفاده کنید.

تگ‌های تصویر HTML