sina salehifard 25 اردیبهشت 1393 9 11102 بازدید آموزش HTML
فیلم آموزش ساخت نقشه (map) در html

اینبار قصد داریم تا روش ایجاد نقشه در html را به شما بیاموزیم. فرض کنید یک سایت خبری در مورد دانشگاه های آزاد دارید و می خواهید یک نقشه از کشور را در سایت ایجاد کنید تا کاربر با کلیک بر روی هر شهر به سایت دانشگاه آزاد آن شهر هدایت شود. برای این کار نیاز دارید تا یک نقشه تصویری (image-map) که بصورت یک عکس است و بخش های مختلف آن بصورت لینک می باشد، ایجاد کنید. در این فیلم آموزشی html با تگ های <map>, <area />, <img /> و صفات shape, coords, usemap نحوه ی ایجاد نقشه در html را به شما می آموزیم.

فیلم آموزش ساخت نقشه (map) در html

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

دسترسی به این بخش مخصوص اعضاست. شما می توانید به رایگان عضو شوید و به این بخش دسترسی داشته باشید. ورود / عضویت

دسترسی سریع :

متن فیلم آموزش ساخت نقشه (map) در html

قبلا با لینک ها کار کردید و یاد گرفتید چگونه یک عکس را لینک کنید اما اگر بخواهیم یک عکس چند لینک داشته باشد، باید از تگ map و area استفاده کنیم. از این تگ ها برای نمایش نقشه یا گراف استفاده میشود.

مثال :

یک عکس از نقشه ایران داریم و می خواهیم با کلیک بر روی هر یک استان ها به یک آدرس مشخص برود. به وسیله تگ map و area و img و داشتن مختصات دور تا دور هر استان براحتی می توانیم اینکار را انجام دهیم.

map

ابتدا تصویر را به وسیله تگ img در صفحه وب خود نشان می دهیم و به آن صفت usemap=”#id”  را اضافه می کنیم و یک نام برای id تصویر خود قرار می دهیم.

نکته : توجه کنید قبل از نام آیدی حتما باید از علامت شارپ (#) استفاده کنید.


<img src="map.gif" width="485" height="443" usemap="#iran-map" />

 

اکنون زمان نوشتن تگ map است. این تگ شامل opening tag و closing tag است که به آن یک صفت name می دهیم تا عکس نقشه خود را به تگ map اتصال دهیم .

پس مقدار صفت name برابر است با مقداری که در usemap استفاده کردیم ولی در آن از علامت # استفاده نمی کنیم.


<img src="map.gif" width="485" height="443" usemap="#iran-map" />

<map name="iran-map">

</map>

 

نوبت به تگ area می رسد. تگ area یک تگ self close است که در تگ map برای بخش بخش کردن عکس به صورت لینک به کار می رود .

صفات area :

  • href برای نوشتن آدرس لینک به کار می رود.
  • Shape که شامل سه مقدار است :

Rect برای محیط مستطیل شکل

Circle برای محیط دایره ای شکل

Poly برای محیط چند ضلعی شکل

  • Cords : به عنوان مثال برای استان اصفهان باید مختصات کامل آن را داشته باشیم زیرا استان اصفهان یک محیط دایره شکل یا مستطیلی یا … نمی باشد و خط های دور آن بالا و پایین رفته اند. به وسیله این صفت می توانیم مختصات قسمت هایی را که می خواهیم، به صورت دو دویی وارد کنیم.

Cords="200,200,150"

 

از سمت چپ دو عدد اول مختصات مرکز دایره و عدد سوم شعاع دایره است.


Cords="180,200"

 

مختصات دو دویی یک چند ضلعی است.

  • Title: به وسیله این صفت می توانید یک متن را در زمان قرار گرفتن موس بر روی element نشان دهید.

نحوه بخش بندی عکس :


<img src="map.gif" width="485" height="443" usemap="#iran-map" />

<map name="iran-map">

<area title="circle" href="http://example.com" shape="circle" coords="200,200,150" ></area>

</map>

اکنون یک قسمت دایره شکل با مختصات خود دایره (اندازه مرکز و شعاع) و با عنوان example و آدرس http://example.com داریم :

map-2اکنون می خواهیم استان ها را ازهم جدا کنیم. برای اینکار باید مختصات دقیق هر استان را بدانیم که زمان بر است و بحث خاص خود را دارد. ما برای طولانی نشدن آموزش، مختصات استان ها را در این قست برای شما قرار داده ایم :


<img src="map.gif" width="485" height="443" usemap="#iran-map" />

<map name="iran-map">

<area title="وب سايت استان اصفهان" href="http://example.com/esfehan" coords="263, 169, 262, 192, 249, 199, 235, 206, 217, 210, 210, 217, 211, 234, 213, 239, 204, 240, 196, 237, 190, 237, 186, 246, 184, 255, 183, 259, 171, 250, 172, 238, 173, 229, 173, 220, 170, 218, 164, 210, 159, 207, 151, 215, 145, 209, 140, 203, 143, 193, 148, 183, 155, 183, 169, 183, 170, 168, 183, 164, 198, 166, 216, 169, 241, 171, 256, 171" shape="POLY">

<area title="وب سايت استان آذربايجان غربي" href="http://example.com/azarbayejan-gharbi" coords="37, 31, 31, 19, 16, 3, 18, 16, 9, 13, 11, 26, 12, 40, 17, 48, 8, 58, 17, 65, 17, 73, 21, 81, 23, 93, 27, 101, 28, 108, 38, 106, 48, 97, 60, 99, 69, 105, 74, 101, 70, 91, 61, 91, 61, 82, 52, 82, 48, 84, 42, 80, 40, 77, 34, 81, 30, 73, 30, 60, 29, 52, 31, 42" shape="POLY">

<area title="وب سايت   استان آذربايجان شرقي" href="http://example.com/azarbayejan-sharghi" coords="35, 49, 41, 28, 54, 34, 70, 32, 82, 22, 84, 34, 83, 43, 81, 51, 88, 54, 94, 64, 94, 72, 99, 81, 88, 82, 80, 86, 73, 90, 65, 87, 63, 80, 54, 80, 45, 75, 46, 65, 42, 61, 37, 55, 41, 49, 38, 41, 44, 30, 41, 28" shape="POLY">

<area title="وب سايت   استان اردبيل" href="http://example.com/ardabil" coords="83, 18, 86, 38, 86, 49, 98, 61, 97, 75, 103, 78, 109, 79, 105, 64, 106, 56, 106, 47, 97, 38, 100, 32, 99, 21, 97, 14, 92, 14" shape="POLY">

<area title="وب سايت   استان گيلان" href="http://example.com/gilan" coords="112, 48, 108, 53, 117, 83, 129, 96, 142, 101, 149, 102, 152, 92, 145, 80, 122, 74" shape="POLY">

<area title="وب سايت استان مازندران" href="http://example.com/mazandaran" coords="160, 94, 190, 104, 215, 98, 226, 96, 232, 101, 232, 107, 226, 115, 215, 120, 213, 122, 204, 120, 195, 122, 179, 115, 169, 109, 158, 102, 157, 97" shape="POLY">

<area title="وب سايت استان ايلام" href="http://example.com/ilam" coords="36, 179, 41, 174, 48, 174, 59, 180, 69, 182, 62, 184, 68, 192, 81, 202, 83, 212, 84, 217, 77, 223, 70, 217, 63, 213, 44, 201" shape="POLY">

<area title="وب سايت   استان بوشهر" href="http://example.com/bushehr" coords="155, 317, 150, 303, 145, 291, 135, 280, 149, 284, 157, 296, 168, 301, 184, 315, 185, 337, 196, 351, 203, 362, 199, 360, 190, 351, 182, 347, 170, 344, 161, 330" shape="POLY">

<area title="وب سايت   استان تهران" href="http://example.com/tehran" coords="206, 126, 187, 123, 164, 109, 154, 108, 152, 111, 155, 117, 147, 127, 161, 132, 160, 141, 179, 142, 183, 149, 184, 134, 182, 129, 191, 136" shape="POLY">

<area title="وب سايت استان چهارمحال و بختياري" href="" coords="162, 250, 167, 246, 170, 225, 157, 211, 145, 218, 135, 205, 127, 209, 138, 222, 145, 237, 145, 241, 152, 243" shape="POLY">

<area title="وب سايت   استان خراسان رضوي" href="http://example.com/razavi" coords="329, 182, 339, 176, 344, 169, 359, 163, 369, 163, 377, 168, 383, 171, 389, 165, 399, 159, 405, 149, 412, 134, 405, 97, 381, 90, 365, 73, 348, 72, 338, 73, 339, 88, 332, 95, 333, 98, 322, 101, 309, 97, 304, 101, 305, 109, 306, 119, 311, 126, 313, 134, 309, 139, 295, 151, 312, 146, 326, 141, 327, 150, 319, 154, 312, 171, 318, 180" shape="POLY">

<area title="وب سايت استان خراسان شمالي" href="" coords="296, 98, 291, 92, 285, 91, 285, 79, 294, 63, 294, 55, 307, 59, 312, 59, 318, 66, 334, 70, 334, 84, 326, 97, 304, 93" shape="POLY">

<area title="وب سايت   استان خراسان جنوبي" href="" coords="391, 177, 400, 185, 398, 203, 409, 238, 388, 252, 377, 264, 357, 248, 344, 237, 347, 223, 334, 204, 331, 191, 349, 174, 359, 171, 373, 170, 392, 180, 399, 185" shape="POLY">

<area title="وب سايت   استان خوزستان" href="" coords="90, 213, 97, 203, 115, 206, 127, 213, 139, 235, 142, 245, 132, 254, 136, 262, 143, 274, 128, 276, 119, 281, 113, 275, 113, 268, 108, 269, 106, 280, 96, 280, 85, 270, 87, 254, 76, 255, 77, 231, 82, 221, 95, 212, 96, 208, 97, 207" shape="POLY">

<area title="وب سايت استان زنجان" href="" coords="116, 95, 108, 84, 87, 83, 76, 89, 78, 102, 87, 107, 88, 119, 103, 127, 106, 119, 118, 115, 119, 106, 111, 102, 109, 97, 114, 90, 106, 84" shape="POLY">

<area title="وب سايت استان سمنان" href="" coords="278, 168, 187, 162, 188, 151, 198, 128, 206, 133, 243, 107, 268, 97, 278, 86, 283, 92, 296, 101, 299, 121, 304, 134, 289, 147" shape="POLY">

<area title="وب سايت   استان سيستان و بلوچستان" href="" coords="431, 241, 411, 239, 377, 268, 380, 326, 373, 326, 376, 334, 370, 350, 367, 376, 369, 393, 378, 406, 405, 411, 439, 417, 443, 397, 450, 383, 455, 375, 479, 370, 479, 357, 469, 351, 462, 326, 435, 317, 417, 282, 434, 256" shape="POLY">

<area title="وب سايت استان فارس" href="http://example.com/fars" coords="179, 280, 169, 275, 157, 287, 164, 295, 177, 303, 191, 339, 218, 365, 239, 369, 246, 357, 270, 359, 273, 345, 268, 327, 265, 311, 252, 299, 246, 301, 236, 284, 236, 276, 212, 265, 212, 255, 190, 243, 182, 268, 181, 276" shape="POLY">

<area title="وب سايت استان قزوين" href="" coords="123, 132, 142, 127, 148, 113, 151, 104, 140, 99, 129, 99, 119, 92, 119, 100, 126, 108, 126, 117, 116, 120, 112, 125, 126, 131" shape="POLY">

<area title="وب سايت استان قم" href="" coords="166, 173, 168, 164, 185, 158, 186, 150, 165, 143, 159, 148, 155, 152, 149, 153, 147, 161, 157, 167" shape="POLY">

<area title="وب سايت استان کردستان" href="" coords="51, 119, 35, 116, 35, 111, 51, 102, 69, 104, 84, 106, 90, 123, 83, 128, 93, 139, 84, 143, 73, 137, 61, 148, 48, 131, 43, 123" shape="POLY">

<area title="وب سايت   استان كرمان" href="" coords="305, 233, 340, 237, 373, 266, 375, 318, 371, 328, 366, 343, 366, 382, 326, 364, 323, 342, 318, 342, 314, 335, 290, 337, 292, 314, 269, 323, 263, 303, 251, 293, 248, 272, 261, 257, 287, 252" shape="POLY">

<area title="وب سايت   استان كرمانشاه" href="" coords="28, 170, 30, 155, 28, 146, 43, 141, 47, 135, 62, 153, 76, 142, 86, 146, 87, 160, 82, 163, 75, 166, 71, 177, 53, 175, 42, 169, 37, 174" shape="POLY">

<area title="وب سايت   استان گلستان" href="http://example.com/golestan" coords="241, 107, 241, 92, 240, 77, 257, 77, 262, 64, 277, 60, 287, 61, 281, 81, 267, 95, 244, 103, 238, 89, 239, 92" shape="POLY">

<area title="وب سايت   استان لرستان" href="" coords="110, 173, 101, 171, 95, 172, 85, 164, 75, 176, 65, 182, 82, 199, 88, 209, 96, 197, 123, 206, 131, 189, 120, 181, 112, 182" shape="POLY">

<area title="وب سايت استان مركزي" href="" coords="115, 162, 122, 149, 127, 135, 145, 128, 157, 135, 149, 150, 144, 150, 140, 158, 152, 167, 160, 175, 143, 178, 138, 186, 126, 178, 117, 178, 115, 171" shape="POLY">

<area title="وب سايت استان يزد" href="" coords="281, 168, 291, 150, 317, 144, 320, 154, 311, 157, 304, 174, 315, 187, 322, 186, 330, 200, 343, 212, 339, 235, 299, 231, 282, 251, 255, 255, 248, 265, 254, 282, 242, 294, 237, 270, 228, 265, 216, 249, 211, 237, 210, 230, 214, 215, 225, 206, 249, 204, 264, 192, 273, 185, 273, 167" shape="POLY">

<area title="وب سايت استان همدان" href="" coords="87, 162, 94, 155, 88, 147, 98, 139, 90, 129, 98, 123, 105, 131, 111, 130, 126, 134, 109, 164, 109, 170, 99, 170" shape="POLY">

<area title="وب سايت استان هرمزگان" href="" coords="381, 410, 365, 403, 356, 382, 335, 373, 319, 363, 316, 351, 305, 342, 294, 342, 287, 330, 280, 326, 271, 327, 275, 345, 274, 359, 252, 360, 245, 365, 241, 370, 222, 366, 215, 366, 229, 372, 233, 380, 253, 381, 263, 387, 271, 377, 284, 371, 297, 363, 309, 370, 314, 386, 321, 403, 335, 405, 357, 408, 365, 409, 374, 409" shape="POLY">

<area title="وب سايت استان كهكيلويه و بويراحمد" href="" coords="147, 286, 145, 275, 139, 259, 136, 254, 148, 245, 159, 255, 170, 260, 179, 272, 163, 270, 160, 278" shape="POLY">

</map>

map-3

می بینیم اکنون موس خود را بر روی هر یک از استان ها نگه داریم، نام آن و لینک مورد نظر را نمایش میدهد.

دسترسی سریع :

نظرات کاربران (9)



  1. soshiant

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

    متشکرم

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      دوست عزیز پاسخ شما روز گذشته داده شد:
      روش کار:
      استفاده از فتوشاپ برای محاسبه اضلاع و بخش هایی که میخواهید مختصات نقطه ها را در آن بخش ها محاسبه کنید. توجه داشته باشید که فاصله ها بر اساس “پیکسل” و از بالا – سمت چپ عکس محاسبه می شوند.

  2. soshiant

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

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      استفاده از فتوشاپ برای محاسبه اضلاع و بخش هایی که میخواهید مختصات نقطه ها را در آن بخش ها محاسبه کنید. توجه داشته باشید که فاصله ها بر اساس “پیکسل” و از بالا – سمت چپ عکس محاسبه می شوند.

  3. سجاد

    با سلام و تشکر از شما
    لطف می کنید لینک آموزش croods ها معرفی کنید ممنون میشم.

    • گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      متوجه منظور شما نشدم؟ در همین آموزش نحوه ی تعیین مقادیر coords ها بر روی عکس توضیح داده شده است؛ اعداد نسبت به گوشه ی بالا سمت چپ عکس تعیین میشوند.

  4. saman

    salam… dar in ghesmat az amoozesh tag kash migoftin chetor mokhtasat ro bayad moshakhas kard
    coords=”124,58,8″
    manzooram mesale balast … chizi darbarash nagoftin rad shodin

    ba sepas…

    • reza

      پس در کل هیچی توضیح نداده اصل قضیه همون croods هاست

      • گروه آموزش طراحی سایت

        با عرض سلام و احترام خدمت شما
        روش انتخاب croods ها در آموزش مربوطه توضیح داده شده است.