Hello guys. I’m new to website developing and i got stucked in something.
So, i created an website and I wanted to make a map with areas for every region of a country. I created the map and the areas of my map.
<map name="image-map">
<area alt="Botoșani" title="Botoșani" href="" coords="575,37,586,30,590,13,597,9,607,6,617,6,625,7,632,12,639,20,645,32,650,43,655,54,663,64,661,70,665,76,661,84,653,86,653,94,644,93,636,91,627,89,620,94,612,99,613,89,612,81,611,73,602,63,593,53,584,44" shape="poly">
<area alt="Iași" title="Iași" href="" coords="610,101,620,97,628,91,640,93,653,95,656,87,665,83,672,80,680,89,685,97,687,107,693,113,701,115,705,126,709,136,718,144,726,149,730,160,722,160,718,164,708,154,701,157,693,148,693,154,694,162,683,163,671,160,660,158,653,153,661,148,666,141,658,141,653,136,648,142,638,143,630,139,623,133,618,131,612,125,610,111" shape="poly">
<area alt="Vaslui" title="Vaslui" href="" coords="660,161,677,164,691,164,697,159,706,158,713,165,721,168,729,166,736,177,740,191,737,200,741,208,736,219,730,228,731,237,730,247,720,248,711,245,704,249,694,249,687,248,683,233,680,220,679,207,673,195,670,183,666,173" shape="poly">
<area alt="Galați" title="Galați" href="" coords="676,250,690,250,704,249,714,245,730,250,732,266,732,280,737,294,729,304,737,313,737,323,726,327,713,328,702,325,689,327,682,316,685,307,675,299,669,285,663,274,663,261,669,254" shape="poly">
<area alt="Brăila" title="Brăila" href="" coords="681,326,697,326,714,327,722,330,720,340,728,353,733,365,731,380,728,392,719,402,706,406,692,406,676,404,666,407,658,405,660,395,661,386,657,382,658,367,655,359,648,360,645,353,652,346,660,346,667,346,673,336" shape="poly">
<area alt="Tulcea" title="Tulcea" href="" coords="725,332,733,325,743,325,749,338,764,347,781,352,789,344,798,346,806,339,818,336,828,328,842,330,851,338,854,356,851,375,850,389,842,397,828,399,811,402,815,394,809,390,808,380,802,372,796,376,794,386,796,392,797,400,790,405,786,415,776,419,761,421,751,418,743,413,736,405,726,401,731,390,734,381,733,365,727,349,726,341" shape="poly">
<area alt="Constanța" title="Constanța" href="" coords="717,408,724,403,737,406,750,418,765,422,778,422,790,417,783,428,788,432,785,443,779,451,774,459,779,468,778,483,777,496,773,511,772,520,757,520,733,515,721,508,716,494,702,494,696,487,675,486,666,479,675,476,689,468,690,476,696,469,708,463,717,461,723,449,731,440,727,430,720,416" shape="poly">
<area alt="Ialomița" title="Ialomița" href="" coords="583,407,594,405,602,400,606,393,612,400,624,404,637,407,643,402,648,409,657,405,665,412,674,406,692,408,710,408,722,423,728,437,719,448,709,459,703,447,682,437,672,441,669,433,659,435,648,439,631,430,622,442,611,441,600,429,592,432,585,424,582,415" shape="poly">
<area alt="Călărași" title="Călărași" href="" coords="692,444,701,450,707,461,695,468,688,465,678,471,663,475,648,472,634,473,627,479,612,482,599,483,595,476,587,465,588,455,596,447,592,440,597,433,606,439,613,443,621,445,625,437,631,433,639,438,650,440,659,437,666,436,669,442,677,439,684,439" shape="poly">
<area alt="Buzău" title="Buzău" href="" coords="612,398,625,402,634,404,645,402,650,408,658,404,660,393,655,379,655,366,646,366,646,356,651,348,661,346,669,346,673,339,664,338,658,334,652,337,647,330,641,327,638,320,633,323,625,324,616,318,607,312,602,302,598,292,593,288,590,299,581,308,576,318,575,327,581,341,581,349,589,350,593,359,599,367,602,380,608,387,607,394" shape="poly">
<area alt="Vrancea" title="Vrancea" href="" coords="593,279,600,275,601,265,600,258,609,255,621,251,628,249,634,255,645,257,653,249,659,242,666,244,671,249,675,242,681,241,683,247,665,253,661,262,661,274,669,289,674,298,682,306,681,317,678,325,669,331,660,332,652,334,645,326,639,316,633,318,622,320,612,313,603,302,597,291" shape="poly">
<area alt="Bacău" title="Bacău" href="data/test.pdf" coords="679,225,676,206,669,193,663,175,648,175,637,171,631,175,623,178,616,174,611,178,604,182,595,189,588,186,581,184,573,184,567,180,558,186,563,197,569,201,569,215,575,223,582,229,588,233,592,244,596,253,602,257,618,250,628,249,637,256,646,256,652,247,657,241,666,240,670,246,676,240,682,240,679,234" shape="poly">
<area alt="Neamț" title="Neamț" href="data/test1.doc" coords="557,184,568,178,576,183,586,182,594,186,602,180,612,173,622,173,631,173,641,170,653,174,664,174,659,166,653,157,658,151,665,144,656,143,645,147,636,146,626,139,614,131,610,116,593,110,572,115,551,112,550,121,543,126,542,136,549,145,555,154,562,158,551,166,554,173" shape="poly">
<area class='inline' href="#inline_content" alt="Suceava" title="Suceava" coords="556,107,574,111,592,107,610,113,609,99,611,84,605,71,591,53,580,42,567,37,547,43,533,45,518,49,503,56,493,62,497,71,499,84,489,90,494,95,495,107,500,113,497,121,496,128,507,128,513,120,522,125,533,131,541,133,541,123,548,116,551,109" shape="poly">
<area class='ajax' href="content/ajax.html" alt="Bistrița-Năsăud" title="Bistrița-Năsăud" coords="489,71,478,69,470,74,452,74,444,68,435,73,424,84,415,91,409,97,406,107,402,115,411,119,419,124,426,130,421,134,422,141,429,146,427,155,424,161,433,164,441,168,441,159,448,154,452,145,459,151,464,158,465,142,472,135,479,130,489,130,494,123,495,113,491,102,487,90,493,83" shape="poly">
<area alt="Harghita" title="Harghita" href="" coords="509,129,518,125,528,132,539,136,547,146,554,154,548,162,551,172,554,183,562,195,565,203,569,215,575,223,583,231,586,240,582,247,569,245,558,248,550,241,550,229,541,228,530,232,520,237,516,243,509,238,502,239,494,234,483,228,475,223,481,219,483,210,490,210,489,200,496,194,504,191,510,183,512,173,508,161,511,151,508,143,513,138" shape="poly">
<area alt="Mureș" title="Mureș" href="" coords="466,155,467,140,480,133,494,131,506,131,507,139,507,150,505,160,509,170,506,186,491,194,484,204,479,216,473,220,468,224,476,227,484,232,493,235,498,240,488,239,481,243,478,248,468,248,458,244,460,231,455,224,448,227,432,228,424,220,419,214,410,217,405,208,403,199,407,190,413,189,410,183,415,179,412,172,424,162,439,169,442,160,451,153,456,147,460,154" shape="poly">
<area alt="Covasna" title="Covasna" href="" coords="518,243,522,235,532,232,545,230,546,241,553,249,565,247,579,247,588,244,593,252,600,265,597,275,591,282,586,294,580,305,573,314,567,321,561,317,562,305,550,297,542,287,533,281,525,274,525,263,526,253,518,250" shape="poly">
<area alt="Brașov" title="Brașov" href="" coords="479,251,484,240,494,241,505,241,514,248,523,254,524,269,527,281,541,291,554,301,560,308,561,318,554,317,550,326,538,321,526,320,517,325,506,329,502,319,491,312,487,302,474,306,461,304,455,293,458,278,465,271,462,265,470,258" shape="poly">
<area alt="Prahova" title="Prahova" href="" coords="521,323,532,321,544,322,552,326,555,317,565,320,573,327,574,338,582,347,588,355,597,364,599,377,604,387,598,400,585,403,575,400,568,402,559,403,550,394,542,390,538,378,532,362,527,344,526,335,522,329" shape="poly">
<area alt="Dâmbovița" title="Dâmbovița" href="" coords="502,342,507,331,518,323,524,334,528,354,533,369,539,387,548,395,556,403,552,410,550,423,542,430,532,431,518,432,508,433,494,426,493,409,495,395,490,385,497,377,492,370,492,356,499,356,501,349" shape="poly">
<area alt="Ilfov" title="Ilfov" href="" coords="583,455,590,449,591,440,585,424,580,407,573,400,560,402,554,410,553,419,552,426,554,439,558,453,567,461,575,456,576,450,566,448,561,440,563,433,569,430,575,430,578,436,579,442" shape="poly">
<area alt="București" title="București" href="" coords="572,447,564,446,560,437,566,430,574,430,580,437,579,445,580,453,604,498,605,498,613,499,622,498,631,498,646,499,659,498,670,497,672,517,657,519,630,517,604,517,605,497" shape="poly">
<area alt="Giurgiu" title="Giurgiu" href="" coords="518,435,527,432,538,433,550,429,551,442,556,453,566,462,577,456,584,469,590,479,592,485,583,486,574,491,564,496,555,502,552,511,541,521,533,526,528,517,522,507,523,496,517,487,526,488,532,485,536,480,528,476,529,469,532,462,525,460,523,453,518,457,516,449,510,446,517,442" shape="poly">
<area alt="Maramureș" title="Maramureș" href="" coords="387,27,396,27,403,31,412,30,420,36,431,38,441,34,454,32,463,39,470,50,479,60,491,63,496,72,484,69,473,72,458,74,446,68,436,71,427,81,416,90,406,96,394,99,384,90,369,90,358,92,360,81,348,82,334,80,337,71,345,60,351,68,361,68,359,59,360,52,355,45,367,47,376,48,384,40,390,37,384,32" shape="poly">
<area alt="Satu-Mare" title="Satu-Mare" href="" coords="379,27,364,24,354,13,341,15,333,23,323,27,317,37,304,43,293,42,282,46,272,60,281,67,285,75,294,78,305,87,320,86,331,90,337,91,338,82,330,79,335,73,341,63,348,59,351,67,359,66,356,53,355,42,364,44,377,44,387,35" shape="poly">
<area alt="Sălaj" title="Sălaj" href="" coords="307,87,322,88,338,92,341,82,356,81,357,90,368,90,380,90,388,96,391,106,386,114,380,121,371,126,358,140,353,131,349,136,341,141,325,138,319,132,310,128,305,122,299,122,300,114,295,108,300,94" shape="poly">
<area alt="Bihor" title="Bihor" href="" coords="260,67,268,62,278,67,288,79,302,86,297,101,295,116,305,126,308,140,308,154,300,162,308,169,315,176,303,183,300,195,291,200,278,198,274,186,264,179,256,169,244,172,243,165,239,159,235,164,228,164,222,159,217,167,211,165,212,154,216,142,227,130,225,122,235,108,243,96,249,86,258,76" shape="poly">
<area alt="Cluj" title="Cluj" href="" coords="364,138,374,129,386,120,393,108,395,99,406,98,405,109,403,115,412,121,420,126,421,133,423,144,427,152,423,161,413,169,414,178,408,182,405,189,400,199,391,200,381,201,379,208,373,204,372,196,363,194,352,192,337,194,328,188,319,177,308,165,302,157,309,149,309,141,306,134,316,132,321,137,331,142,343,140,351,135,356,142" shape="poly">
<area alt="Alba" title="Alba" href="" coords="301,184,314,175,320,185,334,193,349,192,363,191,369,200,375,208,381,201,390,198,403,203,407,214,417,214,422,227,417,238,409,244,403,255,392,251,386,258,380,260,377,268,372,278,370,288,371,299,371,307,363,309,356,298,355,287,350,279,342,258,334,256,328,249,329,237,320,228,310,223,300,214,301,197" shape="poly">
<area alt="Sibiu" title="Sibiu" href="" coords="411,250,418,237,427,224,446,229,458,227,456,240,462,249,477,249,466,259,461,268,458,278,456,291,457,302,441,305,422,311,410,313,401,310,382,313,374,303,372,288,377,271,384,258,394,251" shape="poly">
<area alt="Argeș" title="Argeș" href="" coords="450,305,471,307,486,303,494,316,502,324,505,335,500,345,497,356,490,357,491,367,493,375,489,383,491,392,492,407,492,417,493,428,501,434,492,441,481,444,472,449,460,451,456,435,460,425,452,422,450,412,452,405,444,405,440,393,434,393,438,379,435,371,442,365,444,349,439,342,440,328,444,316" shape="poly">
<area alt="Teleorman" title="Teleorman" href="" coords="465,453,480,448,497,443,508,437,513,449,521,458,530,465,525,471,532,480,517,486,520,496,523,510,530,524,510,532,492,521,480,521,470,516,460,519,449,507,441,492,442,484,460,477" shape="poly">
<area alt="Olt" title="Olt" href="" coords="439,487,441,498,451,512,457,519,447,516,439,514,433,510,421,519,404,520,399,516,410,501,413,493,410,484,414,470,397,452,389,434,391,427,407,428,419,428,421,413,421,395,429,387,440,401,447,414,457,437,461,456,460,475" shape="poly">
<area alt="Vâlcea" title="Vâlcea" href="" coords="369,314,376,310,386,317,399,314,417,314,438,307,447,306,441,323,442,346,443,364,434,376,435,386,418,392,418,405,419,425,392,425,390,418,382,415,384,401,383,368,390,356,387,346,386,334,373,334,366,332,367,320,369,314" shape="poly">
<area alt="Dolj" title="Dolj" href="" coords="379,404,371,409,368,417,355,414,351,422,342,425,336,423,333,431,326,434,323,440,329,446,325,451,317,467,315,475,305,480,300,493,310,500,326,501,343,498,357,501,368,507,374,505,380,508,387,512,397,516,411,501,406,493,408,482,413,477,411,469,393,453,387,440,391,426,386,414,380,411" shape="poly">
<area alt="Gorj" title="Gorj" href="" coords="291,337,304,340,318,336,342,336,348,330,360,335,366,330,384,336,388,351,383,363,380,380,380,391,380,401,372,405,367,413,356,412,350,415,329,409,306,387,306,361,288,357,282,345" shape="poly">
<area alt="Mehedinți" title="Mehedinți" href="" coords="289,359,303,363,306,385,323,405,345,414,349,420,336,424,329,430,321,439,325,449,320,459,313,469,302,464,286,454,290,449,281,444,273,427,278,417,287,419,297,420,292,409,280,402,270,397,260,404,254,413,247,418,246,409,251,393,260,391,269,383,277,371,281,364" shape="poly">
<area alt="Hunedoara" title="Hunedoara" href="" coords="300,214,311,225,323,235,328,243,340,257,345,269,349,280,352,295,363,312,368,323,357,331,348,328,339,334,324,334,303,336,294,334,293,306,282,294,275,278,284,273,278,261,272,245,278,233,282,222,293,223" shape="poly">
<area alt="Caraș-Severin" title="Caraș-Severin" href="" coords="256,286,265,283,276,288,282,297,291,308,294,328,291,340,284,341,284,351,285,360,277,370,267,386,255,391,245,412,237,400,221,394,211,392,205,385,196,380,185,380,192,370,199,365,193,357,194,347,200,335,201,320,195,307,204,299,213,299,220,301,227,301,234,308,240,304,240,295,253,296" shape="poly">
<area alt="Timiș" title="Timiș" href="" coords="139,220,151,230,168,239,180,248,186,241,190,246,193,235,205,233,211,243,215,256,221,250,233,250,247,250,259,256,271,255,277,266,277,277,274,283,259,281,250,287,242,295,235,304,218,298,202,298,191,307,196,315,198,324,196,331,185,331,174,323,168,317,161,321,152,306,145,293,142,277,147,263,136,261,136,250,124,238,110,219,121,215,128,213" shape="poly">
<area alt="Arad" title="Arad" coords="207,158,200,168,194,171,190,181,186,190,181,194,168,209,152,207,142,213,142,219,151,225,162,232,171,237,180,241,187,239,198,231,206,232,216,248,226,247,243,247,256,252,268,255,274,242,275,232,281,218,292,219,299,207,293,199,280,200,275,191,266,184,257,172,243,172,239,163,227,165,215,168" shape="poly">
</map>
And now i wanted when i click on one of this areas to open a lightbox/colorbox whit more descriptions about that reagion(mostly text). I firstly used an inline script for Suceava, but then i dont know how to do that for the other ones…and because of that i used an AJAX function for Bistrita-Nasaud but i got the AJAX error with content failed to load. Here is the script.
<script>
$(document).ready(function(){
$(".ajax").colorbox({width:"60%"});
$(".inline").colorbox({inline:true, width:"60%"});
});
</script>
and here is the ajax.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css"/>
<script src="jquery.min.js"></script>
<script src="jquery.colorbox.js" ></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".ajax").colorbox({width:"60%",cache: false, contentType: 'application/json; charset=utf-8', dataType: 'json'});
$(".inline").colorbox({inline:true, width:"60%"});
});
</script>
</head>
<body>
<div id='homer' >
<h3><p class="round1" style="background: #BC8F8F; border: 2px solid #708090; border-radius: 4px; padding: 6px;"> Județul BN :: România</p></h3>
<font size="2" color="gray">Ultima actualizare: 21 August, 2018</font>
<center><img src="images/suceava.png" alt="Suceava"></center>
<!-- cuprins -->
<button class="collapsible" style=" border-radius: 10px; cursor: pointer;"><strong>Introducere :: Suceava</strong></button>
<div class="content">
<p>Suceava (în germană Sedschopff, Sutschawa, Suczawa sau Sotschen) este municipiul de reședință al județului cu același nume, Bucovina, România. Localitatea se află în sudul regiunii istorice Bucovina (cu excepția cartierului Burdujeni). Orașul este situat în Podișul Sucevei, pe cursul râului cu același nume, la 21 km distanță de vărsarea în Siret. </p>
</div>
<button class="collapsible" style="border-radius: 30px; cursor: pointer;"><strong>Geografie :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Populație :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Economie :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Infrasctructură :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Mediul Politic :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Mediul Militar :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
<button class="collapsible" style="border-radius: 10px; cursor: pointer;"><strong>Mediul Informațional :: Suceava</strong></button>
<div class="content">
<p>Nu este cazul.</p>
</div>
</div>
</body>
</html>
So, the question is if anyone knows how can i easily show a color/lightbox with more information for every area of my map, with no errors or failed to content…help me guys.
I would be very grateful. Thanks. and sorry for the long text 