How to use map tag in a website
বন্ধুরা আজকে আমরা শিখবো কি ভাবে <map> tag use করা হয় একটি ওয়েবসাইটে ।
আমি একটা কথা বলে রাখি আপনারা যদি নোটপ্যাড (basic) use করে থাকেন তাহলে ভালো, কিন্তু এডভান্স কিছু শিখতে হলে আপনারা যদি মাইক্রোমিডিয়া ড্রিমওয়েভের ব্যবহার করতে পারেন তাহলে আরো ভালো হবে ,খুব তাড়াতাড়ি শিখতে সাহায্য করে এই সফটওয়্যার টি ।
<map> tag টি কি ভাবে use করতে হবে তার জন্য নিচে একটি example দিয়ে দেওয়া হলো --
 |
| India Map |
<html>
<head>
<title>Map tag use</title>
</head>
<body>
<img usemap="#kasmir" src="new/india_map.jpg"/>
<map name="kasmir">
<area shape="poly" coords="220,361,231,358,241,357,248,346,247,341,257,338,257,327,243,330,238,327,240,319,252,308,262,305,272,297,276,292,261,292,263,280,257,277,257,270,251,270,249,258,242,260,237,260,233,265,229,257,224,252,220,245,215,240,208,226,202,223,202,212,187,210,180,210,173,213,166,226,162,232,155,237,148,244,140,253,135,258,123,258,118,261,108,254,97,260,93,266,86,274,83,280,83,285,94,291,93,298,93,306,96,310,103,314,103,320,107,327,111,334,120,339,136,344,146,349,159,349,159,355,164,361,165,367,172,374,181,378,191,378,196,372,200,365,200,357,200,350,200,343,206,342,213,342,219,347,222,351,220,361,221,362,229,358" href="new/rajsthan.jpg">
<area shape="poly" coords="224,152,231,139,245,133,260,139,268,138,277,148,294,146,300,154,308,145,304,131,296,128,297,116,307,111,310,101,318,94,325,74,319,67,304,64,286,66,270,75,261,70,255,62,247,54,235,47,227,39,223,33,216,34,206,34,194,38,185,39,175,42,168,54,166,61,183,67,191,77,195,86,187,91,182,100,184,113,185,129,195,139,206,146,213,150,223,155,224,155,230,151,231,144,231,139,231,139" href="new/apple.jpg">
<area shape="poly" coords="349,335,363,344,378,346,382,359,386,368,395,354,393,339,401,330,412,321,420,322,409,314,409,301,412,294,406,281,393,280,378,274,368,269,362,269,354,262,342,254,328,249,321,246,312,246,300,239,292,231,295,227,283,220,270,223,271,209,266,207,255,223,256,241,264,258,262,267,256,270,264,288,281,292,294,301,296,314,288,321,285,329,298,335,309,335,324,330,331,337,341,339,347,339,352,336" href="new/uttar pradesh.jpg">
<area shape="poly" coords="406,280,422,281,429,291,443,294,458,299,472,302,487,302,500,301,507,301,502,309,494,315,500,319,496,329,487,332,477,342,477,350,469,352,458,350,449,344,439,350,427,354,416,354,404,350,397,349,395,335,409,326,420,320,409,311,408,302,415,296,405,284,405,281" href="new/bihar.jpg">
<area shape="poly" coords="503,318,512,323,522,330,512,332,506,341,500,347,518,358,518,368,523,382,527,397,527,414,526,425,511,425,496,425,485,415,476,408,472,398,468,390,452,388,452,379,465,377,473,370,490,358,494,347,500,342,496,335,495,327,499,317" href="new/west bengal.jpg">
<area shape="poly" coords="54,358,60,342,80,349,93,346,101,345,109,346,110,337,129,344,149,346,159,351,162,363,170,370,183,380,189,382,185,387,185,395,180,400,177,408,171,418,176,424,165,432,172,441,165,445,159,443,159,453,146,447,148,437,144,428,144,415,143,405,138,403,138,416,133,423,126,429,116,433,102,435,88,435,80,422,68,406,58,396,74,393,82,392,92,379,84,382,68,382,58,376,52,369,49,360,49,358" href="new/gujrat.jpg">
<area shape="poly" coords="191,381,199,368,201,347,215,347,217,357,216,364,226,361,244,360,248,350,252,341,260,336,258,327,241,327,243,327,248,315,263,306,278,298,289,298,294,313,283,328,276,342,279,354,293,358,288,343,288,334,313,337,324,334,335,343,353,341,366,349,378,352,379,363,372,370,359,369,351,370,354,383,365,382,361,390,352,400,343,403,336,416,328,433,320,424,305,425,290,425,278,427,259,430,257,420,243,421,237,427,226,436,226,431,217,429,204,427,198,420,188,421,187,414,181,414,181,406,182,395,187,378" href="new/madhya pradesh.jpg">
<area shape="rect" coords="58,153,189,176" href="new/chandigarh.jpg">
<area shape="poly" coords="220,155,206,162,202,173,202,183,193,190,179,190,162,191,149,191,149,203,159,205,172,207,186,207,202,210,213,215,215,221,229,218,236,209,247,204,252,197,246,180,237,172,228,157,223,156" href="new/punjab.jpg">
<area shape="poly" coords="228,155,234,140,249,139,264,143,275,149,284,152,291,157,314,158,341,157,364,158,390,155,413,155,434,157,435,174,413,176,382,176,348,176,329,177,301,174,295,175,295,186,281,183,271,190,271,201,265,205,254,196,249,187,242,177,234,166,230,153" href="new/himachal pradesh.jpg">
<area shape="poly" coords="238,212,249,206,252,199,264,204,265,211,259,222,258,234,262,251,264,264,257,270,250,262,245,258,236,260,226,252,218,242,208,227,201,221,201,210,215,222,226,218,239,208" href="new/haryana.jpg">
<area shape="poly" coords="283,185,296,186,298,178,306,190,320,193,325,199,333,204,352,204,385,204,405,204,418,204,423,214,421,219,399,221,373,221,344,220,332,219,331,229,326,235,322,244,304,241,296,235,286,222,274,222,273,207,271,194,275,189,280,183" href="new/uttarakhand.jpg">
<area shape="rect" coords="43,684,184,704" href="new/lakshadweep.jpg">
<area shape="rect" coords="331,660,454,681" href="new/puducherry.jpg">
<area shape="rect" coords="571,621,782,642" href="new/andaban.jpg">
<area shape="poly" coords="257,511,257,511,264,497,264,485,274,479,274,469,290,474,301,479,315,479,315,494,334,507,342,521,369,513,374,503,385,505,393,493,401,487,413,495,421,495,414,507,397,516,388,525,373,536,367,551,352,557,344,560,335,574,323,573,315,585,315,602,317,614,317,626,308,634,299,634,281,639,274,641,272,627,263,620,252,619,247,613,236,606,234,588,243,586,239,573,244,566,255,566,252,553,252,541,255,526,256,511,257,499,264,496" href="new/andhra pradesh.jpg">
<area shape="poly" coords="398,352,419,354,443,350,461,349,475,348,485,335,495,333,498,344,490,360,476,369,464,376,454,377,453,384,467,391,472,402,472,408,459,402,454,409,449,414,436,414,433,406,417,404,409,403,417,390,409,384,406,376,401,369,394,361,395,353" href="new/jharkhand.jpg">
<area shape="poly" coords="368,513,368,513,372,504,390,495,399,487,420,494,439,476,468,465,481,443,479,425,492,421,476,410,457,403,449,412,434,411,431,407,416,406,406,408,398,413,396,425,392,437,379,439,373,445,373,457,377,467,368,467,359,467,366,476,369,490,366,499,355,505,349,518,366,515" href="new/orrisha.jpg">
<area shape="poly" coords="448,273,450,284,477,285,497,285,501,293,501,300,512,301,521,302,531,310,535,305,539,291,523,288,515,282,518,276,514,263,509,260,501,264,501,272,473,272,449,273" href="new/sikkim.jpg">
<area shape="poly" coords="366,381,351,375,368,372,378,367,393,363,400,368,407,376,412,386,416,395,410,402,404,409,399,416,399,427,388,437,375,439,373,449,374,460,375,469,362,461,362,471,368,481,368,494,358,502,351,513,345,518,334,507,328,501,320,497,322,485,332,482,334,476,328,469,325,460,329,452,329,443,328,432,336,414,343,403,354,403,360,395,364,384,358,377" href="new/chatrisgarh.jpg">
<area shape="poly" coords="244,509,254,508,256,520,250,538,250,553,252,564,240,566,240,578,240,587,234,589,235,604,242,616,252,620,267,623,271,641,271,650,258,646,252,653,252,662,252,669,239,675,222,671,208,659,196,651,186,644,184,626,178,611,173,594,172,585,171,571,177,563,173,546,187,544,192,538,203,540,209,535,208,526,226,530" href="new/karnataka.jpg">
<area shape="poly" coords="261,761,261,761,265,742,286,739,288,729,293,713,299,711,307,712,309,696,308,678,306,667,313,653,320,632,315,632,300,636,285,642,274,649,263,649,251,655,254,663,252,670,239,672,226,673,219,676,228,685,231,695,238,711,244,711,240,724,241,736,240,747,237,761,247,766,248,769" href="new/tamil nadu.jpg">
<area shape="poly" coords="116,570,135,563,144,567,157,567,167,570,173,576,172,589,153,589,137,590,122,589,116,584,116,571" href="new/goa.jpg">
<area shape="poly" coords="186,646,190,664,200,674,208,688,213,705,216,722,219,741,232,759,238,749,239,731,239,712,234,695,225,682,221,676,226,676,213,666,193,647" href="new/kerala.jpg">
<area shape="poly" coords="16,440,20,459,43,458,65,458,77,462,73,470,54,467,57,487,72,493,94,491,122,491,143,489,141,468,141,451,152,454,145,436,136,432,115,438,88,438,40,438,17,442" href="#">
<area shape="poly" coords="555,287,577,287,598,281,618,281,627,277,632,263,653,257,665,249,671,255,676,267,661,273,650,281,636,287,635,303,624,310,623,320,619,332,615,342,607,345,602,351,595,341,598,331,607,326,602,316,593,310,587,305,573,309,564,311,548,311,541,311,540,304,540,299,540,294,550,287" href="new/assam.jpg">
<area shape="rect" coords="538,405,625,426" href="#">
<area shape="poly" coords="578,261,578,269,585,270,587,278,590,282,610,282,627,276,636,260,663,252,672,259,678,270,690,264,700,264,698,247,691,237,680,238,681,227,675,221,669,212,659,223,646,223,638,223,622,231,610,247,601,249,597,256,597,260,577,261,579,270" href="new/arunachal pradesh.jpg">
<area shape="poly" coords="675,267,677,273,672,278,660,286,667,302,659,306,652,315,640,315,629,315,623,321,627,308,636,298,643,287,654,280,667,264,671,269" href="#">
<area shape="poly" coords="541,312,542,327,562,329,598,328,607,325,600,314,590,312,587,306,573,312,560,313,552,312,541,312" href="#">
<area shape="poly" coords="594,348,582,356,574,364,581,375,587,383,590,373,594,365,600,373,605,387,608,400,617,403,624,397,623,384,624,378,627,369,627,358,620,354,613,347,603,349,593,347" href="#">
<area shape="poly" coords="645,318,645,318,653,324,648,339,643,354,628,356,619,350,619,338,622,322,637,318" href="#">
<area shape="poly" coords="153,539,153,554,160,566,177,565,175,550,185,542,193,540,206,540,207,528,221,528,229,517,238,515,242,505,252,501,261,494,261,482,271,479,272,468,285,472,306,475,315,481,320,495,323,484,332,481,327,468,327,450,326,436,323,429,303,426,282,429,265,431,257,423,251,420,238,429,227,433,216,429,197,423,188,419,177,412,177,421,181,427,173,430,175,441,167,444,161,445,161,452,152,455,143,456,144,478,148,495,150,520,153,540" href="new/maharasthra.jpg">
</map>
</body>
</html>
<map> tag যেখানে start হয়েছে সেখানে যে usemap টা আছে ওটার নাম আর ম্যাপ নাম টা একই রাখতে হবে নইলে কাজ করবে না ,উপরে শুরুতেই হাইলাইট করে দেওয়া আছে ।
আমি যে ইমেজ ব্যবহার করেছি সেটা হয়তো আপনাদের কাছে নেয় , আপনারা যে কোনো ইমেজ use করতে পারেন ।
উপরের কোডিং গুলো যে কোনো সফটওয়ারে পেস্ট করে index.html নামে সেভ করে যে কোনো broswer এ রান করালেই দেখতে পাবেন ।
<map> ট্যাগ এর shape 3 রকমের
1.<area shape="poly">
2.<area shape="circle">
3.<area shape="rect">
উপরে ম্যাপের সাইজ গুলি আমি ড্রিমওয়েভের ব্যবহার করে নির্ধারন করেছি ।
0 মন্তব্যসমূহ