استفاده از تگ MAP
برای اینکه بتوانیم بخش های مختلف یک تصویر (عکس) را قابل کلید کنید در HTML از تگ MAP و زیر مجموعه آن یعنی تگ Area استفاده می کنیم این بطور خاص برای نقشه ها کاربرد بسیار زیادی دارد و بخش پیش رو من یک فایل قابل ویرایش با فرمت AI (نرم افزار Adobe Illustrator) از نقشه استان های ایران تهیه کردم و کد HTML مختصات تمام استان های ایران نیز برای شما قرار داده شده تا در پروژه های خویش با دست باز و بدون دردسر استفاده کنید. برای مثال به کمک این کد و اضافه کردن چند خط کد jQuery می توانید براحتی نقشه ای ایجاد کنید که برای مثال با کلید روی هریک از استان های آن متنی برای معرفی آن استان برای گردشگران پدیدار شود و… البته همواره به کمک فایل AI می توانید نقشه رو با سلیقه خودتان تغییر دهید 😉
<map>
<area shape="poly" title="آذربایجان شرقی" coords="114,40,110,42,108,46,102,47,96,55,89,57,86,56,83,57,80,58,76,56,71,56,66,53,64,52,62,52,58,49,52,54,48,55,48,59,51,64,51,70,45,75,46,77,48,79,49,85,50,88,50,96,50,99,53,106,52,111,52,113,56,118,59,119,62,124,66,124,69,126,72,129,74,133,78,132,81,128,83,131,86,131,89,130,92,132,96,138,101,141,105,142,108,138,112,137,116,131,119,130,123,132,126,132,128,129,132,129,137,130,140,128,143,127,141,123,141,119,138,118,136,113,134,111,134,108,138,104,137,101,132,100,130,91,130,88,127,87,125,88,119,84,117,84,116,81,117,78,123,71,123,69,122,66,123,63,123,41,121,38,118,37">
<area shape="poly" title="آذربایجان غربی" coords="107,146,110,150,110,155,111,158,114,157,116,158,114,161,110,161,107,164,101,164,99,163,95,160,94,158,92,156,78,156,74,156,71,153,64,157,64,160,62,162,57,162,54,166,54,169,50,167,46,168,46,167,48,165,47,163,46,162,47,160,45,157,46,155,43,151,41,152,38,146,38,146,40,141,37,136,33,136,33,136,33,135,35,133,35,131,35,131,34,130,35,128,35,126,32,124,32,119,34,116,32,113,27,109,27,107,28,106,28,103,26,102,28,99,28,96,25,95,23,94,21,93,21,92,19,91,17,91,17,88,19,85,23,80,23,77,27,74,26,70,22,71,20,69,23,64,23,62,21,59,22,56,22,55,23,53,20,51,20,49,18,47,20,44,21,42,22,40,22,40,18,38,18,34,15,30,16,29,18,29,19,30,22,30,24,31,27,31,29,28,29,24,31,22,31,19,34,17,34,17,39,20,39,22,43,25,44,28,44,30,44,30,44,30,47,34,48,35,48,38,51,41,54,41,55,42,57,45,57,48,58,49,52,54,48,55,48,59,51,64,51,70,45,75,46,77,48,79,49,85,50,88,50,96,50,99,53,106,52,111,52,113,56,118,59,119,62,124,66,124,69,126,72,129,74,133,78,132,81,128,83,131,86,131,89,130,92,132,96,138,101,141,105,142">
<area shape="poly" title="اردبیل" coords="118,37,119,35,124,35,126,32,129,30,130,31,135,27,136,28,139,26,149,38,146,40,143,42,141,44,142,47,148,53,146,55,143,55,140,55,138,60,141,65,144,67,144,68,147,70,150,70,151,74,156,80,155,82,160,86,159,91,153,99,154,109,155,115,162,128,163,133,160,133,157,132,151,132,147,128,143,127,141,123,141,119,138,118,136,113,134,111,134,108,138,104,137,101,132,100,130,91,130,88,127,87,125,88,119,84,117,84,116,81,117,78,123,71,123,69,122,66,123,63,123,41,121,38">
<area shape="poly" title="اصفهان" coords="253,240,248,242,243,242,239,241,234,238,228,241,227,247,223,251,227,254,226,260,225,264,220,267,212,268,207,271,201,271,196,273,192,277,191,281,191,284,186,289,186,293,180,293,179,296,179,300,182,301,185,307,186,310,194,309,194,309,197,312,199,314,199,314,203,315,206,312,206,310,206,310,212,309,217,311,220,315,221,318,221,318,225,325,231,330,231,333,235,339,232,348,232,355,234,358,231,363,232,369,237,374,239,379,243,380,248,384,250,384,251,380,254,371,252,365,253,357,258,349,263,350,267,353,272,355,278,355,282,357,284,360,285,363,289,361,293,359,295,357,288,352,288,336,289,330,286,324,287,321,290,320,293,317,297,316,302,317,302,317,330,302,341,300,345,298,346,294,351,293,358,285,363,283,369,278,368,261,367,253,366,250,299,250,295,249,285,249,277,244,272,242,263,243,254,237">
<area shape="poly" title="ایلام" coords="111,330,110,328,110,327,107,326,107,324,108,322,105,319,105,315,102,312,99,311,95,313,83,300,79,297,74,293,70,291,63,291,62,289,63,288,63,287,61,285,63,284,66,283,66,279,62,275,61,270,57,269,57,265,55,263,53,263,56,260,57,257,55,255,56,253,55,250,57,249,60,249,63,247,66,249,68,252,69,251,73,250,82,256,87,260,89,260,92,261,96,258,101,259,103,257,105,254,107,252,110,258,106,262,95,263,92,268,88,267,87,268,88,271,91,273,92,276,98,279,105,283,114,291,118,292,123,297,124,301,126,302,124,305,122,306,122,316,121,320,117,325,116,330,112,332">
<area shape="poly" title="بوشهر" coords="281,524,278,523,274,523,274,520,278,519,270,511,264,510,256,503,252,502,239,502,238,498,233,498,233,498,229,490,230,487,224,479,224,477,222,476,223,467,220,464,216,463,213,459,214,457,218,454,214,450,210,451,208,449,209,446,209,443,208,442,209,439,208,437,205,435,195,421,193,418,192,412,190,408,192,405,196,404,201,407,203,409,206,413,209,416,211,417,212,420,215,424,228,429,232,437,238,440,245,449,252,459,255,465,254,473,256,482,262,492,265,494,267,498,271,504,272,511,286,520,287,522,286,524,282,526">
<area shape="poly" title="تهران" coords="240,175,239,179,233,179,231,183,227,187,221,190,217,190,217,190,214,192,210,191,209,194,208,197,214,198,216,199,221,200,225,201,222,205,222,207,220,210,228,211,238,215,250,219,254,222,257,224,260,221,261,217,257,214,255,212,256,208,257,202,261,201,268,203,281,203,284,199,287,199,290,195,295,192,297,190,291,187,285,185,280,183,276,184,271,187,264,188,259,187,256,186,252,181,248,178,245,176,241,173">
<area shape="poly" title="البرز" coords="206,196,202,198,201,195,203,192,203,189,207,186,208,182,212,179,215,177,216,173,210,170,209,168,209,167,218,168,223,168,225,168,229,171,234,170,237,172,241,173,240,175,239,179,233,179,231,183,227,187,221,190,217,190,217,190,214,192,210,191,209,194,208,197">
<area shape="poly" title="چهارمحال و بختیاری" coords="229,369,224,367,217,366,216,364,211,364,208,360,204,361,200,357,204,354,205,350,203,347,203,344,192,335,192,331,188,329,185,321,183,320,182,316,174,311,173,306,176,304,178,300,179,300,182,301,185,307,186,310,194,309,194,309,197,312,199,314,199,314,203,315,206,312,206,310,206,310,212,309,217,311,220,315,221,318,221,318,225,325,231,330,231,333,235,339,232,348,232,355,234,358,231,363,232,369">
<area shape="poly" title="خراسان جنوبی" coords="542,247,540,253,541,259,544,261,539,263,540,267,545,269,554,270,555,272,553,273,550,279,543,285,545,292,557,324,554,331,555,339,557,342,555,345,558,350,556,352,541,361,537,368,527,370,525,373,524,383,517,389,511,392,490,370,469,352,459,346,457,345,457,340,468,326,459,306,450,298,449,289,446,282,447,276,449,271,460,267,468,252,474,249,483,247,515,249,523,252,526,254,540,246">
<area shape="poly" title="خراسان رضوی" coords="394,229,399,229,409,228,417,218,424,214,432,213,438,214,443,219,442,228,431,235,428,237,429,249,423,256,423,259,433,274,436,275,449,271,460,267,468,252,474,249,483,247,515,249,523,252,526,254,540,246,546,239,553,239,549,233,546,231,547,230,551,231,551,229,553,227,554,226,554,224,557,219,556,212,558,208,556,205,557,200,558,199,558,197,562,188,558,185,560,176,558,174,556,174,556,172,558,168,557,162,555,158,555,156,556,151,554,147,529,149,527,146,528,144,520,138,519,133,514,133,509,129,505,131,504,128,500,127,499,125,496,122,495,115,491,115,483,110,480,110,478,109,478,109,477,111,473,111,470,109,468,112,465,112,463,111,464,115,465,117,465,125,467,129,464,132,460,133,460,133,461,138,462,141,461,144,456,146,456,146,455,149,455,155,450,158,444,155,435,148,424,146,415,147,412,149,411,151,415,155,414,159,412,163,412,173,413,176,413,182,415,186,420,191,420,194,421,200,419,204,413,209,402,217,397,218,389,228">
<area shape="poly" title="خراسان شمالی" coords="399,95,401,94,399,91,401,89,405,88,408,90,411,90,413,88,415,90,419,92,424,91,424,91,427,87,428,88,429,92,432,95,431,99,435,101,439,102,448,104,450,103,453,106,456,106,459,108,459,109,459,109,463,111,464,115,465,117,465,125,467,129,464,132,460,133,460,133,461,138,462,141,461,144,456,146,456,146,455,149,455,155,450,158,444,155,435,148,424,146,415,147,412,149,411,151,406,154,403,152,401,153,396,151,397,149,393,145,391,145,389,142,389,137,385,135,380,135,380,133,382,129,387,128,391,122,392,116,394,109,401,103,397,96" >
<area shape="poly" title="خوزستان" coords="171,305,165,300,158,298,151,298,144,294,136,293,129,294,124,301,126,302,124,305,122,306,122,316,121,320,117,325,116,330,112,332,116,338,117,338,117,342,112,354,111,372,122,372,121,392,121,392,124,393,126,397,126,399,130,402,132,406,132,408,133,412,137,414,141,414,141,414,141,410,142,410,146,413,151,412,153,410,153,405,150,402,150,399,152,396,152,395,155,395,156,397,158,396,159,392,162,394,162,398,161,399,156,399,155,401,155,402,159,404,162,404,161,406,162,408,167,408,170,410,171,414,173,415,180,409,183,407,189,407,190,408,192,405,196,404,201,407,203,409,205,406,205,397,203,396,207,391,204,390,202,387,198,385,198,382,194,381,189,380,185,376,186,373,187,372,188,367,193,365,198,358,200,357,204,354,205,350,203,347,203,344,192,335,192,331,188,329,185,321,183,320,182,316,174,311,173,306" >
<area shape="poly" title="زنجان" coords="166,134,169,135,170,141,173,144,174,148,171,149,171,149,167,150,163,154,163,154,162,157,162,157,166,160,168,162,172,162,177,164,179,169,177,173,174,177,174,177,171,180,167,179,164,181,164,181,162,182,159,179,157,178,157,180,156,183,153,184,153,186,155,189,156,190,152,195,144,193,141,190,136,189,132,187,133,186,127,180,129,177,128,174,127,173,129,169,128,162,124,158,119,158,116,158,114,157,111,158,110,155,110,150,107,146,105,142,108,138,112,137,116,131,119,130,123,132,126,132,128,129,132,129,137,130,140,128,143,127,147,128,151,132,157,132,160,133,163,133">
<area shape="poly" title="سمنان" coords="339,162,343,160,345,157,352,157,359,153,364,151,372,152,376,145,378,140,377,137,380,135,385,135,389,137,389,142,391,145,393,145,397,149,396,151,401,153,403,152,406,154,411,151,415,155,414,159,412,163,412,173,413,176,413,182,415,186,420,191,420,194,421,200,419,204,413,209,402,217,397,218,389,228,384,238,378,250,366,250,299,250,295,249,285,249,277,244,272,242,263,243,254,237,256,230,258,226,257,224,260,221,261,217,257,214,255,212,256,208,257,202,261,201,268,203,281,203,284,199,287,199,290,195,295,192,297,190,297,182,302,180,307,177,315,176,319,172,323,167,326,162,333,162" >
<area shape="poly" title="سیستان و بلوچستان" coords="560,352,571,352,583,354,588,354,590,361,593,368,592,371,592,375,562,415,581,435,581,439,587,446,589,452,594,459,597,460,602,465,608,466,616,469,621,470,626,476,630,475,634,475,634,480,634,487,637,499,638,505,636,510,637,514,643,516,647,515,650,515,652,512,656,516,654,519,654,525,656,527,655,529,653,529,654,538,648,537,640,537,632,541,627,541,624,544,621,547,621,550,616,550,613,554,608,555,606,557,605,575,602,574,602,595,600,598,600,598,597,600,598,603,589,604,583,600,566,599,565,595,565,595,564,592,559,592,557,594,558,596,558,597,554,596,554,596,552,595,549,598,545,595,542,594,542,594,541,596,538,596,538,596,537,595,528,595,528,595,525,592,520,592,520,592,512,596,508,596,510,594,510,587,509,585,509,581,505,577,504,573,503,570,503,567,499,564,498,561,494,557,494,556,505,556,507,554,506,547,499,540,501,536,498,531,500,527,499,520,502,515,502,515,501,500,502,494,506,491,510,490,509,484,507,481,509,478,514,477,520,477,523,477,525,475,524,466,520,459,521,456,524,452,519,443,519,432,517,403,516,396,513,393,511,392,517,389,524,383,525,373,527,370,537,368,541,361,556,352">
<area shape="poly" title="فارس" coords="284,360,282,357,278,355,272,355,267,353,263,350,258,349,253,357,252,365,254,371,251,380,250,384,250,389,248,393,250,397,249,403,246,406,237,401,232,398,232,398,229,395,226,395,224,396,230,403,227,407,224,410,220,410,215,417,211,417,212,420,215,424,228,429,232,437,238,440,245,449,252,459,255,465,254,473,256,482,262,492,265,494,267,498,271,504,272,511,286,520,287,522,294,524,299,528,303,529,308,531,314,532,323,533,327,529,327,524,336,519,360,521,369,519,377,517,379,508,383,505,387,503,384,500,384,496,380,495,376,493,375,479,377,477,376,473,377,471,371,469,367,464,369,460,369,453,353,434,348,431,344,432,339,434,334,431,329,421,324,416,322,400,320,395,315,391,311,390,292,381,287,376,287,368,285,363">
<area shape="poly" title="قزوین" coords="158,191,164,194,166,198,171,199,176,201,182,201,183,198,186,198,189,196,192,198,198,199,202,198,201,195,203,192,203,189,207,186,208,182,212,179,215,177,216,173,210,170,209,168,209,167,218,168,223,168,224,164,217,158,208,154,203,153,197,154,195,156,189,157,185,155,180,154,175,150,174,148,171,149,171,149,167,150,163,154,163,154,162,157,162,157,166,160,168,162,172,162,177,164,179,169,177,173,174,177,174,177,171,180,167,179,164,181,164,181,162,182,159,179,157,178,157,180,156,183,153,184,153,186,155,189,156,190" >
<area shape="poly" title="قم" coords="221,215,220,222,212,223,207,228,200,224,195,231,195,235,200,237,203,237,205,245,208,246,210,248,216,247,221,250,223,251,227,247,228,241,234,238,239,241,243,242,248,242,253,240,254,237,256,230,258,226,257,224,254,222,250,219,238,215,228,211,220,210">
<area shape="poly" title="کردستان" coords="119,158,124,158,128,162,129,169,127,173,128,174,129,177,127,180,133,186,128,188,124,189,124,193,128,200,132,206,133,211,131,214,128,213,125,214,124,215,124,215,120,211,115,210,109,210,105,213,102,215,99,216,98,220,93,222,88,221,84,215,81,211,78,208,76,205,74,202,71,203,72,200,70,199,71,197,70,195,68,196,67,192,65,191,66,188,67,186,67,183,69,183,72,182,75,181,79,178,76,177,73,178,71,178,70,176,64,176,62,177,60,177,57,175,56,172,54,170,54,169,54,166,57,162,62,162,64,160,64,157,71,153,74,156,78,156,92,156,94,158,95,160,99,163,101,164,107,164,110,161,114,161,116,158">
<area shape="poly" title="کرمان" coords="348,431,353,434,369,453,369,460,367,464,371,469,377,471,381,469,389,464,391,463,395,463,397,466,398,472,398,483,405,489,413,490,416,490,422,485,427,484,432,486,432,494,433,497,438,499,441,500,444,504,439,509,437,511,437,518,442,523,446,527,452,532,456,537,461,538,467,541,471,543,476,547,483,546,488,548,492,551,494,556,505,556,507,554,506,547,499,540,501,536,498,531,500,527,499,520,502,515,502,515,501,500,502,494,506,491,510,490,509,484,507,481,509,478,514,477,520,477,523,477,525,475,524,466,520,459,521,456,524,452,519,443,519,432,517,403,516,396,513,393,511,392,490,370,469,352,459,346,457,345,436,341,422,336,410,338,410,344,401,352,391,351,389,357,355,374,345,371,345,371,338,375,342,394,337,402,341,406,343,418,344,432" >
<area shape="poly" title="کرمانشاه" coords="71,205,69,207,67,206,65,207,61,207,60,210,61,211,60,213,57,213,56,214,56,216,54,217,52,219,52,221,53,221,53,223,54,224,52,227,47,224,46,225,48,227,47,230,45,230,44,233,45,235,47,235,49,236,48,239,48,240,48,240,48,242,48,242,44,245,44,245,44,247,44,247,43,248,43,250,46,251,46,253,47,254,48,257,50,260,51,262,53,263,56,260,57,257,55,255,56,253,55,250,57,249,60,249,63,247,66,249,68,252,69,251,73,250,82,256,87,260,89,260,92,261,96,258,101,259,103,257,105,254,107,252,108,249,108,246,110,244,115,243,116,241,116,241,115,239,117,238,120,239,122,242,123,242,129,236,129,232,123,228,125,225,124,218,124,215,124,215,120,211,115,210,109,210,105,213,102,215,99,216,98,220,93,222,88,221,84,215,81,211,78,208,76,205,74,202,71,203" >
<area shape="poly" title="کهکیلویه و بویراحمد" coords="205,406,205,397,203,396,207,391,204,390,202,387,198,385,198,382,194,381,189,380,185,376,186,373,187,372,188,367,193,365,198,358,200,357,204,361,208,360,211,364,216,364,217,366,224,367,229,369,232,369,237,374,239,379,243,380,248,384,250,384,250,389,248,393,250,397,249,403,246,406,237,401,232,398,232,398,229,395,226,395,224,396,230,403,227,407,224,410,220,410,215,417,211,417,209,416,206,413,203,409" >
<area shape="poly" title="گلستان" coords="380,133,382,129,387,128,391,122,392,116,394,109,401,103,397,96,393,96,387,97,383,94,378,95,374,95,370,98,365,101,361,102,355,109,352,111,351,115,351,120,346,124,342,122,334,127,327,126,323,127,325,138,325,143,325,143,327,145,322,147,319,148,321,153,325,154,329,157,330,159,333,162,339,162,343,160,345,157,352,157,359,153,364,151,372,152,376,145,378,140,377,137,380,135">
<area shape="poly" title="گیلان" coords="208,154,210,151,209,147,213,145,216,144,218,139,213,136,209,133,206,129,205,123,204,121,199,120,196,118,192,119,186,118,177,116,170,112,167,109,166,105,164,98,164,78,158,80,155,82,160,86,159,91,153,99,154,109,155,115,162,128,163,133,166,134,169,135,170,141,173,144,174,148,175,150,180,154,185,155,189,157,195,156,197,154,203,153,208,154">
<area shape="poly" title="لرستان" coords="123,297,118,292,114,291,105,283,98,279,92,276,91,273,88,271,87,268,88,267,92,268,95,263,106,262,110,258,107,252,108,249,108,246,110,244,115,243,116,241,116,241,115,239,117,238,120,239,122,242,123,242,129,246,136,251,143,252,147,249,151,250,157,255,159,255,157,259,159,266,162,267,164,269,168,269,171,266,175,268,177,266,179,268,179,272,183,274,184,278,189,280,191,281,191,284,186,289,186,293,180,293,179,296,179,300,178,300,176,304,173,306,171,305,165,300,158,298,151,298,144,294,136,293,129,294,124,301">
<area shape="poly" title="مازندران" coords="221,141,226,146,235,150,245,153,256,156,263,155,272,153,278,152,285,151,295,148,301,146,308,145,312,145,314,147,319,148,321,153,325,154,329,157,330,159,333,162,326,162,323,167,319,172,315,176,307,177,302,180,297,182,297,190,291,187,285,185,280,183,276,184,271,187,264,188,259,187,256,186,252,181,248,178,245,176,241,173,237,172,234,170,229,171,225,168,223,168,224,164,217,158,208,154,210,151,209,147,213,145,216,144,218,139">
<area shape="poly" title="مرکزی" coords="189,280,184,278,183,274,179,272,179,268,177,266,175,268,171,266,168,269,164,269,162,267,159,266,157,259,159,255,162,252,163,245,160,242,158,238,161,233,165,229,164,224,169,218,173,216,171,213,174,212,176,209,173,205,174,203,176,201,182,201,183,198,186,198,189,196,192,198,198,199,202,198,202,198,206,196,208,197,214,198,216,199,221,200,225,201,222,205,222,207,220,210,221,215,220,222,212,223,207,228,200,224,195,231,195,235,200,237,203,237,205,245,208,246,210,248,216,247,221,250,223,251,227,254,226,260,225,264,220,267,212,268,207,271,201,271,196,273,192,277,191,281">
<area shape="poly" title="هرمزگان" coords="506,594,500,591,494,590,482,589,476,592,472,592,469,586,464,586,462,588,461,584,457,584,456,586,456,586,454,584,454,584,447,584,444,580,444,578,443,578,439,575,439,566,436,564,436,559,435,556,437,553,433,540,427,533,421,530,412,529,401,528,396,534,389,536,385,536,381,540,381,542,381,545,375,546,375,546,371,545,365,548,358,553,354,557,350,556,348,557,346,555,341,554,335,548,329,548,328,547,323,547,323,549,316,548,311,545,307,542,306,538,297,535,288,531,287,529,282,526,286,524,287,522,294,524,299,528,303,529,308,531,314,532,323,533,327,529,327,524,336,519,360,521,369,519,377,517,379,508,383,505,387,503,384,500,384,496,380,495,376,493,375,479,377,477,376,473,377,471,381,469,389,464,391,463,395,463,397,466,398,472,398,483,405,489,413,490,416,490,422,485,427,484,432,486,432,494,433,497,438,499,441,500,444,504,439,509,437,511,437,518,442,523,446,527,452,532,456,537,461,538,467,541,471,543,476,547,483,546,488,548,492,551,494,556,494,557,498,561,499,564,503,567,503,570,504,573,505,577,509,581,509,585,510,587,510,594,508,596" >
<area shape="poly" title="همدان" coords="124,218,125,225,123,228,129,232,129,236,123,242,129,246,136,251,143,252,147,249,151,250,157,255,159,255,162,252,163,245,160,242,158,238,161,233,165,229,164,224,169,218,173,216,171,213,174,212,176,209,173,205,174,203,176,201,171,199,166,198,164,194,158,191,156,190,152,195,144,193,141,190,136,189,132,187,133,186,128,188,124,189,124,193,128,200,132,206,133,211,131,214,128,213,125,214,124,215,124,215" >
<area shape="poly" title="یزد" coords="447,276,446,282,449,289,450,298,459,306,468,326,457,340,457,345,436,341,422,336,410,338,410,344,401,352,391,351,389,357,355,374,345,371,345,371,338,375,342,394,337,402,341,406,343,418,344,432,339,434,334,431,329,421,324,416,322,400,320,395,315,391,311,390,292,381,287,376,287,368,285,363,289,361,293,359,295,357,288,352,288,336,289,330,286,324,287,321,290,320,293,317,297,316,302,317,302,317,330,302,341,300,345,298,346,294,351,293,358,285,363,283,369,278,368,261,367,253,366,250,378,250,384,238,389,228,394,229,399,229,409,228,417,218,424,214,432,213,438,214,443,219,442,228,431,235,428,237,429,249,423,256,423,259,433,274,436,275,449,271">
</map>
چند تذکر!
- تگ Map محدودیت هایی در زمینه های مختلف مثل واکنشگرایی دارد که باعث شده جای خودش رو به SVG بده.
- برای استفاده بهتر تگ مپ می تونید از کتابخانه ایمیج مپستر استفاده کنید این کتابخانه شما رو قادر می کنه امکانات واکنشگرایی خوبی به تگ مپ بدید.
- برای افزودن موقعیت های جدید به نقشه می تونید تگ های Area رو ویرایش کنید یا تگ های جدید اضافه کنید که این وبسایت این امکان رو به رایگان در اختیار شما گذاشته: Free Online Image Map Generator (image-map.net)
استفاده از نقشه بصورت SVG
برای استفاده از تگ SVG باید نقشه ایران رو بصورت فرمت SVG ذخیره کنیم (این فرمت نوعی فرمت ذخیره تصاویر با قابلیت ذخیره برداریست) اما دقت داشته باشید اگر این تصویر رو از اینترنت پیدا می کنید باید کد های آن را ویرایش تمیز کنید. درون کد های SVG چند تگ وجود دارد، تگ اصلی خود SVG است که اکثرا دو زیر مجموعه مثل تگ G (گروهی از چند بردار) و تگ Path (مسیر مشخص یک بردار) دارد باید path های مورد نظر خودمان را از G خارج کنیم تا راحت تر بتوانیم روی آنها کار کنیم. من از نقشه SVG آقای صالحی استفاده می کنم چرا که برای این کار بخصوص رسم شده کار بسیار راحت تر خواهد شد.
حالا برای مثال می خوام با قرار گرفتن موس روی هر استان نام آن استان (یا هر متن دیگری) در پایین نقشه بنمایش در بیاید برای این کار جاوا اسکریپت کمک می گیرم شما می تونید به کمک کتابخانه پیشرفته تری مثل jQuery امکانات خارق العاده تری به نقشه خودتان اضافه کنید (بزودی آموزش کامل تری در زمینه ایجاد tooltip در اسکیلدآپ قرار خواهم داد اما تا آن زمان پیشنهاد می کنم از کتابخانه Tippy.js استفاده کنید). و البته استایل هایی برای زیبا تر شدن نقشه به آن اضافه می کنیم.
اکنون به کد SVG نگاهی می اندازیم. کد های آقای صالحی به تنهایی قابل استفاده نبودند بنابرین تغییرات زیادی در آنها انجام دادم که ساختار کلی کد بصورت زیر است:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="500" height="500" viewBox="150 0 650 600" enable-background="new 70 0 731.89 575.28"
xml:space="preserve">
<metadata>
<rdf:rdf>
<dc:format>
image/svg+xml
</dc:format>
<dc:title>
IRAN MAP
</dc:title>
<dc:creator>
Mohammad Anbarestany (based on https://github.com/peymanslh/iranmap)
</dc:creator>
</rdf:rdf>
</metadata>
<style type="text/css">
#Background>path {
fill: #232425;
}
#states>a>path {
fill: #f7f7f7;
stroke: #232425;
stroke-width: 0.4;
stroke-miterlimit: 4;
}
g[id*="-name"] {
fill: #232425;
stroke: none;
}
#States a:hover path {
fill: #232425;
}
#States a:hover g[id*="-name"] path {
fill: #fff;
}
</style>
<g id="Background">
<path ....></path>
</g>
<g id="States">
<a id="khorasan-j" target="_blank" xlink:href="" onclick="...">
<path id="khorasan-j" ...></path>
<g id="khorasan-j-name">
<path ....></path>
<path ....></path>
</g>
</a>
<!-- ادامه کد -->
با نگاه به کد بالا مشخص است در SVG دو تگ اصلی g وجود دارد یکی برای استان ها (States) و دیگری برای پس زمینه (Background) که با استفاده از این ویژگی که کد های SVG کد هایی از نوع HTML هستند داخل آنها از تگ style قرار دادم (البته می توانستیم این استایل ها را در یک فایل css جداگانه بنویسیم و بعداً به این فایل لینک کنیم) همانطور که در کد های استایل می بینید ابتدا یک رنگ مشکی به پس زمینه (تگ وکتور گروهی G با id ای بنام Background) دادیم سپس ویژگی های تگ های path درون گروه استان ها رو تعیین کردیم (به آنها رنگ زمینه سفید و لبه هایی مشکی با قطر 0.4 دادیم) و بعد از آن به کمک انتخابگر های css تمام گروهایی (G ها) را که دارای id ای دارای کلمه -name پیدا کردیم و به آنها رنگ زمینه مشکی دادیم (اینها همان متون داخل نقشه هستند) سپس تعیین کردیم با قرار گرفتن موس روی تگهای path استان ها رنگشان که قبلا سفید تعیین شده بود مشکی شود در استایل بعد از آن تعیین کردیم نوشته های داخل استان ها که قبلا مشکی بودند با قرار گرفتن موس سفید شوند. (بیشتر بخوانید)
حالا می خواهیم با قرار گرفتن موس روی هر استان نام آن یا یک متن دلخواه زیر نقشه نمایش داده شود برای این امر ابتدا داخل کد یک تگ text خالی در جایی که می خواهیم متن نمایش یابد قرار می دهیم:
<text class="label" id="state-name"> </text>
به این تگ (text) یک کلاس دادیم تا بتوانیم به آن استایل بدهیم و یک آی دی دادیم تا به کمک جاوا اسکریپت بتوانیم آن را انتخاب کنیم. داخل تگ یک فاصله هم تایپ کردم تا بتوانم آن را با متن دلخواه جایگزین کنم.
دو تابع جاوا اسکریپت برای این کار می نویسیم:
<script type="text/javascript">
function displayName(name) {
document.getElementById('state-name').firstChild.data = name;
}
function hideName() {
document.getElementById('state-name').firstChild.data = " ";
}
</script>
کد تابع رو دقیقاً در انتهای تگ SVG قرار میدهیم تابع اول متن دلخواه را با ورود موس روی استان در تگ text قرار می دهد و تابع دوم با خروج موس آن را دوباره حذف می کند. برای این کار باید اتریبیوت های onmouseover و onmouseleave را به تگ های a استان ها اضافه کنیم برای مثال:
<a id="tehran" onmouseover="displayName('تهران')" onmouseleave="hideName()">
سعی شد برای راحتی بیشتر شما در ارتقا و استفاده از کد id های مناسب برای تگ های مختلف html نوشته شده باشد برای مثال تمام تگ های a دارای آی دی نام استان هستند.
نکته برای تنظیم سایز نقشه و محل قرار گیری آن می تونید از اتریبیوت های viewBox ، height و width استفاده کنید که داخل تگ باز SVG قرار دارن
پ. ن. می تونید نمونه استفاده از کدهای بالا در این سایت بینید:
http://irantolidautoclave.com/نمایندگان