- مدیر
- تیر 29, 1393
- 6:03 ب.ظ
- 3 نظر
خلاصه این مطلب :
آموزش تگ <map> در HTML
میخواهیم منوی زیر را طراحی کنیم:
این کار را با نرم افزار paint به را حتی میتوان انجام داد:
میخواهیم با کلیک بر روی مستطیل اول صفحه یک و مستطیل دوم صفحه 2 و به همین ترتیب تا صفحه 5
باز شوند.
ابتدا ما پنج صفحه نیاز داریم به صورت زیر :
هر کدام از این کد ها مربوط به یک صفحه است:
صفحه 1:
|
1 2 3 4 5 6 7 8 |
<html> <head> <title></title> </head> <body> <h1 >page 1</h1> </body> </html> |
صفحه 2:
|
1 2 3 4 5 6 7 8 |
<html> <head> <title></title> </head> <body> <h1 >page 2</h1> </body> </html> |
به همین ترتیب 5 صفحه میسازیم با نامهای page1.html,page2.html,page3.html,page4.html,page5.html
خب حالا نوبت به طراحی صفحه اصلی میرسه که منوی ما درون اون قرار داره:
با دستور زیر یک تصویر داخل صفحه خود قرار میدهیم و با استفاده از خاصیت usemap یک نام به آن اختصاص میدهیم:
|
1 |
<img src="1.png" width="718" height="56" usemap="#mnu"> |
قبل از نام باید از کارکتر # استفاده کنیم.
خب برای زیبایی کار تصویر رو با تگ <center></center> به وسط صفحه میاریم .به این شکل:
|
1 |
<center ><img src="1.png" width="718" height="56" usemap="#mnu"></center> |
حالا نوبت به تگ <map> رسید .
برای ارتباط تگ <map> و تصویر از خاصیت name تگ <map> استفاده میکنیم: به این شکل:
|
1 |
<map name="mnu"></map> |
خب لینکهای ما باید بین تگ <map> و </map> قرار گیرند.
برای ساخت لینکها از تگ <area> استفاده میکنیم.
خصوصیات تگ <area>
-
shape
که میتواند rect ,circle,poly باشد
-
coords
مختصات لینک را میگیرد
مثال برای مستطیل (X1,y1,x2,y2)
-
href
ادرس لینک را میگیرد مثلا :page1.html
در اینجا ما از شی Rect برای لینکها استفاده میکنیم برای بدست آوردن مختصات از یک روش بسیار
جالب استفاده میکنیم.
تصویری که ایجاد کرده اید را با نرم افزار paint باز کنید:
خب ما از لینک شماره 5 شروع میکنیم :
در برنامه paint موس را به جایی که در تصویر علامت گذاری کرده ام ببرید و به قسمتی که در پایین
عکس مشخص کرده ام توجه کنید .این قسمت پایینی مشخصات x1,y1 تصویر است .
در اینجا چون من تصویر را در وصت قرار داده ام مختصات از 0و0 شروع نشده است.
برای x2وy2 موس را به قسمت علامت گزاری شده در تصویر زیر ببرید:
به این ترتیب مختصات x2,y2 رو هم بدست آوردیم.برای سایر لینکها هم به همین صورت عمل میکنیم.
خب حالا کد کامل برنامه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <title>صفحه اصلی سایت</title> </head> <body> <center ><img src="1.png" width="718" height="56" usemap="#mnu"></center> <map name="mnu"> <area shape="rect" coords="0,0,137,50" href="page5.html"> <area shape="rect" coords="145,0,275,50" href="page4.html"> <area shape="rect" coords="280,0,418,55" href="page3.html"> <area shape="rect" coords="428,0,567,55" href="page2.html"> <area shape="rect" coords="574,0,717,55" href="page1.html"> </map> </body> </html> |
دانلود مثال همراه با فایل PDF اموزش
3 پاسخ
عالی بود در دریم ویور چطور انتخابش میکنیم
تفاوتی در نوع ide وجود نداره این کار در paint انجام میشه
عالی بود. ممنونم