HTML / CSS ejemplo pagina 6

Otra forma de hacer un menú para nuestra página es mapeando una imagen, de esta forma podemos marcar enlaces sobre la imagen.

Para ello busque una imagen que tuviera marcadas las Comunidades Autonómicas.

Esta imagen la inserte entre una <p> y cree una clase que llame centro para poder colocarla en la parte de la página que quería, todo ello esta dentro de un div que se llama mapa.

Realizado esto empecé a mapear la imagen creando sectores de cada comunidad autónoma.

Y este es el resultado.

Código HTML

<div id="mapa">

<p class="centro"><img src="imagenes/EspañaPolítica2.jpg" usemap="#Map">

  <map name="Map">

    <area shape="poly" coords="542,259,511,283,507,290,521,289,512,294,517,296,518,307,511,300,501,302,492,306,482,310,473,304,450,320,437,333,436,352,445,346,451,357,447,361,454,367,457,384,471,378,470,416,466,431,467,458,487,443,495,438,518,430,527,442,518,453,523,461,534,466,543,454,544,461,557,457,564,459,566,463,570,460,577,459,578,464,583,462,594,455,598,444,606,450,610,449,608,438,619,423,626,416,621,404,623,397,614,391,605,392,608,370,617,361,620,349,613,339,613,331,620,327,619,322,612,324,605,314,605,307,597,301,598,296,600,294,607,281,588,281,583,271,571,265,564,268,558,259,545,268,541,262" href="#Galicia" alt="Galicia">

    <area shape="poly" coords="607,281,598,296,606,307,604,317,614,324,618,323,620,326,612,338,619,342,620,350,625,351,631,347,640,350,647,345,645,342,650,341,653,335,664,338,671,336,678,334,684,335,693,343,700,342,707,336,719,337,730,333,730,328,737,330,750,329,755,322,767,314,772,322,780,320,780,313,787,310,792,310,796,310,793,305,796,298,736,284,706,282,697,273,676,282,667,279,608,280" href="#Asturias" alt="Asturias">

    <area shape="poly" coords="797,299,792,302,797,309,789,309,780,313,779,317,773,321,773,329,780,338,799,335,808,343,817,344,819,357,829,362,831,360,835,364,845,362,844,354,845,347,838,349,835,344,846,335,858,322,876,325,875,316,886,307,892,309,896,305,892,298,877,298,874,292,866,286,856,291,849,290,813,299,795,297" href="#Cantabria" alt="Cantabria">

    <area shape="poly" coords="895,302,897,307,893,310,887,307,874,315,876,323,889,321,900,321,896,326,899,338,905,340,912,346,899,350,897,346,893,346,887,352,893,356,897,355,906,349,898,357,899,364,908,366,917,370,921,385,925,381,931,382,934,392,942,393,953,392,953,388,946,383,952,378,961,377,960,370,966,361,965,351,967,347,972,346,979,342,982,333,990,326,989,316,997,315,1000,309,1002,309,998,299,973,310,957,309,942,300,933,298,929,294,915,294,908,302,909,308,902,303" href="#Pais_Vasco" alt="Pais_Vasco">

    <area shape="poly" coords="1001,301,1006,309,1012,306,1015,317,1021,311,1030,312,1024,330,1031,336,1038,328,1038,336,1051,338,1060,343,1074,343,1078,347,1071,353,1068,362,1059,372,1056,378,1047,378,1047,383,1043,386,1040,386,1038,391,1037,397,1032,404,1029,416,1029,428,1033,440,1028,454,1021,454,1010,451,1002,447,991,442,997,430,1004,430,1006,425,995,419,987,406,978,407,977,402,969,402,965,397,956,397,953,392,955,388,951,383,960,378,962,371,966,361,967,347,974,347,980,343,991,328,994,318,1003,308" href="#Navarra" alt="Navarra">

    <area shape="poly" coords="620,351,620,363,610,368,608,392,619,391,623,397,621,402,627,409,624,419,614,427,608,435,612,449,620,452,624,445,627,452,636,452,640,449,643,459,641,470,642,480,647,478,652,477,661,478,670,488,657,506,640,524,636,521,626,530,625,537,620,543,613,543,622,562,621,573,623,587,620,593,625,595,621,601,625,611,618,621,628,624,639,622,644,616,655,608,667,600,678,608,676,614,689,618,697,614,697,619,707,618,720,628,727,622,733,624,733,637,744,640,755,634,759,634,759,639,770,632,775,623,779,621,785,633,791,628,793,618,805,609,810,608,809,592,811,582,813,588,819,588,820,580,829,569,835,571,837,559,842,550,848,549,866,531,879,526,878,519,896,518,912,519,917,516,928,522,933,520,940,528,943,534,951,540,959,541,972,538,974,536,981,540,982,530,972,526,972,515,976,504,981,509,987,506,985,486,996,482,999,474,995,465,995,461,995,450,987,455,976,450,972,439,974,435,965,434,962,431,952,431,945,434,942,443,929,443,929,432,923,439,919,442,913,437,900,426,900,391,903,382,918,380,919,372,901,361,900,357,891,357,887,353,894,347,900,348,904,353,910,347,903,342,897,338,898,326,899,323,881,325,861,322,846,337,841,335,836,343,839,347,843,346,847,362,834,365,834,360,828,365,821,360,817,346,811,344,803,336,792,339,782,338,773,329,772,322,769,317,761,320,751,327,750,329,736,330,733,328,729,332,718,339,710,337,697,342,690,342,684,335,676,336,666,339,654,338,647,345,642,350,632,350,622,352" href="#Castilla_Leon" alt="Castilla_Leon">

    <area shape="poly" coords="1079,349,1089,362,1096,357,1102,361,1113,356,1121,359,1128,372,1144,372,1147,368,1156,374,1160,370,1165,372,1187,372,1190,380,1187,393,1189,418,1187,429,1178,448,1178,459,1158,480,1161,486,1163,486,1164,494,1160,500,1158,506,1161,520,1160,526,1156,531,1150,534,1154,544,1154,559,1153,568,1148,573,1142,576,1140,578,1136,576,1125,574,1122,569,1116,577,1112,582,1108,583,1108,586,1109,588,1111,600,1108,602,1110,609,1105,618,1104,622,1097,625,1096,624,1091,634,1088,638,1088,643,1073,651,1073,662,1068,665,1066,657,1058,651,1051,651,1046,654,1047,649,1052,643,1051,638,1046,638,1043,636,1038,631,1035,635,1029,637,1022,634,1020,630,1014,627,1006,620,998,609,1001,601,1004,590,1012,590,1017,586,1016,573,1014,566,1011,564,1012,557,1005,544,986,530,980,530,975,526,971,513,977,509,981,510,987,506,984,488,1000,477,999,467,994,444,1009,451,1027,453,1035,442,1030,424,1034,406,1037,396,1040,387,1048,383,1048,378,1054,380,1063,371,1070,361,1077,347" href="#Aragon" alt="Aragon">

    <area shape="poly" coords="1186,353,1205,362,1216,363,1219,369,1235,369,1242,378,1240,389,1240,396,1246,399,1255,397,1261,392,1278,395,1282,395,1280,405,1288,406,1294,401,1307,399,1322,408,1335,410,1334,404,1340,400,1344,402,1347,396,1361,394,1366,398,1370,398,1369,407,1382,410,1377,417,1374,419,1370,417,1366,423,1367,428,1372,438,1374,447,1370,458,1353,471,1341,479,1303,497,1290,517,1223,536,1222,540,1218,538,1206,540,1203,549,1187,565,1191,568,1196,574,1190,583,1179,586,1174,594,1167,589,1167,587,1155,586,1156,580,1149,575,1153,568,1155,546,1152,537,1159,528,1160,513,1163,499,1166,489,1162,482,1168,470,1176,460,1179,448,1189,417,1189,395,1190,382,1187,372,1182,370,1180,359,1188,355" href="#Cataluña" alt="Cataluña">

    <area shape="poly" coords="918,379,912,381,913,378,902,378,904,384,903,390,904,399,902,404,898,423,917,440,926,432,929,434,930,444,942,442,949,432,962,432,968,435,972,433,975,440,979,450,988,455,995,451,994,445,993,438,999,430,1005,429,1004,425,997,421,991,408,976,408,976,404,969,401,967,398,956,397,955,392,940,394,935,390,932,386,925,380,921,380" href="#Rioja" alt="Rioja">

    <area shape="poly" coords="866,533,875,539,881,544,873,567,878,574,877,580,885,586,889,596,892,594,892,604,898,606,894,613,894,624,900,622,902,634,903,640,896,643,883,641,879,648,873,643,848,661,844,655,853,649,863,639,856,635,846,633,833,627,828,623,823,620,813,626,808,624,806,618,796,628,794,626,797,618,804,613,810,609,810,589,822,588,821,580,829,571,836,572,838,562,839,558,841,549,849,550,865,535" href="#Madrid" alt="Madrid">

    <area shape="poly" coords="615,621,610,624,609,636,620,645,618,655,614,663,610,666,607,680,597,685,591,682,587,683,572,683,571,687,577,697,586,701,584,708,589,719,591,731,597,733,598,738,604,736,612,744,605,756,605,762,590,772,588,784,583,801,599,821,602,828,610,826,623,831,623,837,637,838,642,843,647,847,653,842,670,852,687,845,691,837,697,831,703,827,707,831,704,835,704,840,712,832,717,831,721,827,719,814,718,803,723,801,731,792,748,781,747,778,760,774,766,760,771,760,773,754,765,753,764,744,771,743,767,740,774,729,784,734,778,717,784,707,783,705,773,710,767,710,746,687,747,667,741,671,737,669,738,661,731,657,732,638,731,626,726,625,720,629,712,624,707,620,699,618,698,617,692,620,678,613,680,610,668,604,660,606,644,616,640,621,626,624,617,622" href="#Extremadura" alt="Extremadura">

    <area shape="poly" coords="791,629,796,632,808,620,814,626,823,623,862,640,843,654,850,664,873,644,881,647,885,644,898,645,904,640,900,621,896,622,894,617,900,609,894,606,893,596,884,584,881,582,881,571,875,568,882,543,870,531,882,525,881,521,894,520,918,517,934,525,952,542,965,542,974,538,981,541,984,534,994,537,1013,558,1016,588,1010,588,999,604,1027,637,1029,648,1046,648,1047,652,1043,655,1044,662,1036,673,1038,682,1034,682,1029,681,1020,703,1029,712,1046,718,1039,741,1050,755,1060,753,1063,770,1063,770,1065,779,1056,782,1049,775,1033,779,1031,776,1024,779,1024,789,1021,792,1021,810,1014,816,1009,815,1007,809,1001,808,983,818,981,814,977,820,969,827,961,834,959,844,945,836,952,822,947,810,940,807,944,797,929,795,917,798,913,798,909,804,905,800,893,801,880,799,879,805,872,807,869,802,864,803,849,803,845,809,815,807,814,812,802,806,772,784,769,778,758,777,764,762,770,761,772,756,768,752,764,746,768,743,772,734,781,733,778,719,783,708,781,705,769,709,748,684,748,666,743,672,739,668,738,661,732,658,734,640,745,641,758,636,763,638,779,621,785,632" href="#Castilla_Mancha" alt="Castilla_Mancha">

    <area shape="poly" coords="614,828,609,840,609,845,603,845,598,847,588,848,587,860,580,871,570,889,576,908,577,925,596,924,620,928,647,946,658,966,652,969,657,981,668,981,668,992,663,990,682,1022,691,1019,702,1033,715,1038,726,1032,726,1024,733,1027,745,998,767,991,782,992,787,985,796,981,803,971,820,971,830,966,851,967,864,969,874,974,887,968,916,967,931,976,945,962,958,956,970,969,984,957,990,951,998,919,1009,908,999,900,984,881,983,863,971,858,958,845,943,838,951,827,949,814,944,808,942,797,922,799,911,800,906,805,903,802,881,800,873,806,851,803,843,809,816,809,805,811,776,789,770,788,770,779,762,779,759,775,719,805,720,822,719,831,705,837,706,832,703,829,690,838,688,846,675,851,664,849,651,842,647,847,640,841,631,839,624,835,624,832,615,829" href="#Andalucia" alt="Andalucia">

    <area shape="poly" coords="1025,780,1024,787,1021,792,1022,809,1015,818,1009,815,1008,810,1001,809,984,820,982,816,960,833,960,845,971,862,985,860,984,881,1009,907,1021,902,1031,892,1041,888,1049,891,1053,888,1060,889,1079,885,1069,872,1075,865,1067,858,1053,834,1061,820,1054,812,1055,801,1059,785,1048,774,1036,778,1024,779" href="#Murcia" alt="Murcia">

    <area shape="poly" coords="1171,595,1165,588,1157,587,1154,583,1155,579,1146,575,1140,578,1131,577,1123,571,1110,585,1111,595,1113,600,1110,601,1113,610,1102,622,1094,626,1088,643,1074,652,1072,662,1068,664,1064,658,1058,652,1048,652,1046,647,1051,643,1051,641,1045,639,1037,632,1035,635,1028,637,1028,647,1044,648,1046,653,1045,660,1038,670,1038,678,1030,683,1021,693,1021,703,1036,716,1046,718,1045,728,1037,739,1052,755,1063,756,1066,777,1058,783,1058,797,1052,805,1057,817,1062,826,1056,831,1073,864,1080,850,1086,828,1093,829,1094,815,1103,812,1106,803,1120,795,1130,795,1130,787,1144,780,1149,775,1144,767,1134,760,1121,745,1116,730,1109,711,1111,695,1122,673,1135,654,1152,626,1172,594" href="#Valenciana" alt="Valenciana">

    <area shape="poly" coords="728,1048,732,1052,736,1049,732,1047,728,1047" href="#Ceuta" alt="Ceuta">

    <area shape="poly" coords="911,1103,910,1107,912,1112,917,1111,912,1107" href="#Melilla" alt="Melilla">

    <area shape="poly" coords="1218,748,1361,648,1441,641,1456,664,1365,723,1355,739,1253,785,1238,785,1220,750" href="#Baleares" alt="Baleares">

    <area shape="poly" coords="77,974,419,969,387,1057,354,1084,254,1114,176,1088,138,1088,84,1117,66,1109,87,1050,64,1014,78,976" href="#Canarias" alt="Canarias">

  </map>

   

</p>

</div>

Código CSS.

.centro { text-align:center;

}

#mapa { margin:0;

padding:0;

margin-top:200px;

border:1px solid #931416;

width:auto;

height:auto;

}