1. Home
  2. »
  3. HTML CSS
  4. »
  5. آموزش تگ map همراه با مثال عملی

خلاصه این مطلب :

آموزش تگ <map> در HTML

میخواهیم منوی زیر را طراحی کنیم:

آموزش تگ map همراه با مثال عملی
آموزش تگ map همراه با مثال عملی

این کار را با نرم افزار  paint به را حتی میتوان انجام داد:

میخواهیم با کلیک بر روی مستطیل اول صفحه یک و مستطیل دوم صفحه 2 و به همین ترتیب تا صفحه 5

باز شوند.

ابتدا ما پنج صفحه نیاز داریم به صورت زیر :

هر کدام از این کد ها مربوط به یک صفحه است:

صفحه 1:

صفحه 2:

 

به همین ترتیب 5 صفحه میسازیم با نامهای page1.html,page2.html,page3.html,page4.html,page5.html

خب حالا نوبت به طراحی صفحه اصلی میرسه که منوی ما درون اون قرار داره:

با دستور زیر یک تصویر داخل صفحه خود قرار میدهیم و با استفاده از خاصیت usemap یک نام به آن اختصاص میدهیم:

 

قبل از نام باید از کارکتر # استفاده کنیم.

خب برای زیبایی کار تصویر رو با تگ <center></center>  به وسط صفحه میاریم .به این شکل:

 

حالا نوبت به تگ <map> رسید .

برای ارتباط تگ <map> و تصویر از خاصیت name تگ <map> استفاده میکنیم: به این شکل:

 

خب لینکهای ما باید بین تگ <map> و </map> قرار گیرند.

برای ساخت لینکها از تگ <area> استفاده میکنیم.

خصوصیات تگ <area>

  • shape

که میتواند rect ,circle,poly  باشد

  •  coords

مختصات لینک را میگیرد

مثال برای مستطیل (X1,y1,x2,y2)

  • href

ادرس لینک را میگیرد مثلا :page1.html

در اینجا ما از شی Rect برای لینکها استفاده میکنیم برای بدست آوردن مختصات از یک روش بسیار

جالب استفاده میکنیم.

تصویری که ایجاد کرده اید را با نرم افزار paint باز کنید:

آموزش تگ map همراه با مثال عملی
آموزش تگ map همراه با مثال عملی

خب ما از لینک شماره 5 شروع میکنیم :

در برنامه paint موس را به جایی که در تصویر علامت گذاری کرده ام ببرید و به قسمتی که در پایین

عکس مشخص کرده ام توجه کنید .این قسمت پایینی مشخصات x1,y1 تصویر است .

آموزش تگ map همراه با مثال عملی
آموزش تگ map همراه با مثال عملی

در اینجا چون من تصویر را در وصت قرار داده ام مختصات از 0و0 شروع نشده است.

برای x2وy2 موس را به قسمت علامت گزاری شده در تصویر زیر ببرید:

آموزش تگ map همراه با مثال عملی
آموزش تگ map همراه با مثال عملی

به این ترتیب مختصات x2,y2 رو هم بدست آوردیم.برای سایر لینکها هم به همین صورت عمل میکنیم.

خب حالا کد کامل برنامه:

 

دانلود مثال همراه با فایل PDF اموزش

 

امتیاز این post

3 پاسخ

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

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

لطفا ابتدا به حساب کاربری خود وارد شوید