World! I am new in web development and I write now web pages to popup pictures. i want to active div when its id called from usemap areas like in this example from my code:
<div id="country">
<img src="a6.png" usemap="#workmapsouth" alt="South America map - Countries">
<map name="workmapsouth">
<area href="channels.html#ve" alt="Venezuela" title="Venezuela" coords="711,123,691,116,692,105,682,95,664,92,652,82,664,75,648,72,630,74,629,61,621,61,612,61,610,69,613,76,607,79,598,85,579,78,559,74,546,78,531,68,519,57,506,54,499,40,489,43,488,52,479,57,466,65,454,57,445,61,443,72,436,76,432,85,424,96,425,106,435,109,437,116,440,124,445,136,446,142,454,152,469,152,478,153,491,155,504,167,509,175,545,168,551,176,541,185,538,204,550,225,540,238,556,257,560,272,575,289,590,279,602,278,616,271,634,256,621,248,615,227,607,213,636,219,649,224,661,214,677,208,688,204,694,195,677,173,686,159,697,149,692,138" shape="poly">
<area href="channels.html#co" alt="Colombia" title="Colombia" coords="443,56,468,43,455,37,446,44,429,54,404,62,376,75,376,92,366,102,347,117,336,119,327,147,337,169,337,216,338,233,318,245,303,265,324,283,354,298,360,292,376,301,396,302,405,315,417,326,432,345,447,349,463,342,479,346,492,354,484,374,497,389,505,325,494,306,493,292,513,287,496,278,499,268,537,261,552,260,536,239,544,226,536,215,532,191,543,175,514,177,496,169,482,157,446,156,434,137,430,115,419,102,428,78" shape="poly">
<area href="channels.html#br" alt="Brazil" title="Brazil" coords="745,279,768,268,792,265,801,255,813,252,824,262,847,260,864,257,877,239,891,215,901,246,911,262,921,275,955,303,1033,338,1132,357,1232,413,1247,464,1228,502,1205,525,1156,600,1153,674,1140,708,1113,763,1084,790,1054,793,968,828,952,889,896,966,847,1019,853,1000,831,970,808,955,774,932,797,907,838,881,845,863,843,844,831,839,831,812,827,796,810,802,798,769,758,761,751,716,764,694,757,669,745,660,743,637,731,639,718,638,707,634,708,603,697,583,668,573,619,555,602,540,597,495,575,496,552,507,540,512,520,526,504,519,493,524,488,511,483,494,475,487,473,496,462,501,450,498,441,490,429,475,420,459,433,436,443,419,449,408,475,399,490,395,505,390,507,370,507,349,511,318,505,303,500,297,523,288,511,271,546,268,555,280,563,287,583,298,594,286,609,276,631,266,647,256,629,240,624,225,642,231,653,230,665,224,671,215,683,212,694,208,704,215,698,233,700,255,707,269,717,279,728,279" shape="poly">
<area href="channels.html#gu" alt="Guyana" title="Guyana" coords="779,257,761,230,752,211,752,198,763,193,769,177,757,164,740,155,729,133,716,123,702,136,701,147,697,156,687,169,690,185,703,190,713,206,710,223,709,239,714,258,726,270,740,271" shape="poly">
<area href="channels.html#su" alt="Suriname" title="Suriname" coords="794,257,794,248,816,247,823,249,830,233,830,218,823,203,829,187,830,175,794,178,773,177,769,193,757,201,756,211,764,229,779,254,785,257" shape="poly">
<area href="channels.html#frg" alt="French Guiana" title="French Guiana" coords="829,253,860,253,880,216,883,201,837,177,826,199,829,245" shape="poly">
<area href="channels.html#ar" alt="Argentina" title="Argentina" coords="617,785,622,770,648,772,667,796,687,810,731,827,755,841,746,851,741,866,732,883,742,886,760,889,783,889,803,885,818,874,827,850,835,850,835,868,829,878,809,891,798,897,783,911,771,927,755,940,746,955,745,975,744,983,742,991,737,1019,737,1042,762,1045,764,1065,779,1075,773,1096,763,1109,747,1120,729,1122,706,1129,662,1130,662,1141,659,1171,641,1180,623,1172,605,1171,600,1184,612,1198,629,1192,631,1203,631,1214,621,1212,614,1213,607,1220,597,1233,590,1254,568,1265,548,1280,551,1297,569,1299,583,1307,582,1333,558,1337,546,1350,538,1364,528,1413,532,1437,579,1464,595,1464,595,1472,576,1475,564,1476,553,1472,548,1481,538,1472,530,1465,525,1424,514,1411,501,1404,491,1405,459,1407,451,1398,452,1383,446,1372,436,1369,428,1366,428,1356,444,1344,452,1318,460,1303,466,1276,474,1257,475,1242,462,1238,458,1212,459,1176,463,1156,478,1128,478,1105,477,1087,488,1074,492,1061,490,1049,504,1036,504,1022,500,1001,491,973,498,953,504,924,510,909,522,886,536,877,530,850,535,833,544,823,563,804,562,788,572,778,581,771,592,772,603,777" shape="poly">
<area href="channels.html#ch" alt="Chile" title="Chile" coords="536,1486,482,1479,435,1460,409,1442,382,1402,371,1336,373,1295,383,1255,409,1174,425,1141,414,1100,438,1059,449,1029,335,999,332,973,455,951,464,919,482,848,491,695,505,679,526,717,523,733,532,753,537,770,545,788,557,790,551,810,533,820,530,830,526,843,528,867,528,879,515,887,505,902,497,921,492,948,483,967,488,984,500,1013,493,1029,483,1051,482,1074,469,1089,473,1114,471,1122,463,1140,456,1157,451,1174,454,1198,446,1203,453,1226,469,1250,462,1261,455,1282,453,1305,438,1320,445,1330,439,1339,422,1353,421,1370,434,1381,445,1381,446,1393,452,1406,460,1411,469,1410,486,1411,501,1410,521,1424,524,1450,522,1437,523,1466" shape="poly">
<area href="channels.html#bo" alt="Bolivia" title="Bolivia" coords="513,532,527,535,536,526,558,516,581,507,594,505,592,524,594,545,614,569,633,565,643,573,661,581,690,590,699,593,699,603,703,644,740,649,741,665,752,675,759,688,756,703,744,716,725,705,690,710,683,711,662,717,657,731,657,728,657,731,652,760,653,751,647,769,631,765,618,767,615,777,602,769,590,765,577,763,566,767,556,774,548,781,538,764,532,746,528,729,532,712,523,700,515,678,509,665,520,656,524,644,514,639,519,625,517,613,524,599,521,588,525,571,524,557,514,543" shape="poly">
<area href="channels.html#pa" alt="Paraguay" title="Paraguay" coords="661,781,653,769,659,757,656,742,668,725,679,719,694,715,713,710,729,711,739,720,748,732,752,744,752,760,748,766,756,769,764,772,772,775,785,772,796,774,801,796,806,811,821,809,830,814,826,826,825,836,821,851,819,864,798,882,780,887,756,880,737,880,750,852,759,842,745,828,723,818,705,811,690,805,671,794" shape="poly">
<area href="channels.html#ec" alt="Ecuador" title="Ecuador" coords="308,275,280,286,274,309,264,321,263,343,280,370,280,381,277,391,287,392,297,395,301,402,307,395,311,383,316,370,330,357,351,353,364,343,376,330,383,314,374,304,364,295,355,300,340,294,326,287,313,280" shape="poly">
<area href="channels.html#pe" alt="Peru" title="Peru" coords="380,303,400,315,412,327,424,341,434,353,455,348,473,352,489,356,480,373,491,387,481,385,468,392,449,396,431,408,424,428,421,445,407,456,423,481,449,511,469,512,478,504,482,534,507,532,519,569,515,601,511,623,507,640,515,648,501,666,500,675,496,684,485,687,466,675,384,631,359,596,257,427,253,396,264,374,271,372,272,386,272,397,299,404,307,401,315,384,320,372,338,362,353,358,366,348,375,337,383,329,388,314" shape="poly">
<area href="channels.html#ur" alt="Uruguay" title="Uruguay" coords="773,940,803,957,830,976,849,999,845,1013,844,1025,832,1038,818,1044,810,1045,788,1044,757,1036,742,1022,752,949" shape="poly">
<area href="channels.html#fai" alt="Falkland Islands" title="Falkland Islands" coords="678,1384,901,1453" shape="rect">
</map>
</div>
channels file here contain divs with ids that I want to call and here is a part from channels.html:
<html lang="en">
<head>
<title>
Story Behind a Picture
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wwr.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<h2>venezuela</h2><br>
<div id="ve" class="row" style="width:100%" >
<div class="column">
<img src="ve1.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="ve2.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="ve3.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="ve4.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="column">
<img src="ve5.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="column">
<img src="ve6.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="ve1.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="ve2.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="ve3.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="ve4.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="ve5.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="ve6.jpg" style="width:100%; height: 600px;">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div style="width: 100%; background-color: black;" class="row">
<div class="column">
<img class="demo cursor" src="ve1.jpg" onclick="currentSlide(1)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="ve2.jpg" onclick="currentSlide(2)" style="width:100%; height: 250px;" alt="Barrio House Neighborhood">
</div>
<div class="column">
<img class="demo cursor" src="ve3.jpg" onclick="currentSlide(3)" style="width:100%; height: 250px;" alt="Sunset in Llanos - The Llanos is a vast tropical grassland plain situated to the east of the Andes in Colombia and Venezuela, in northwestern South America. It is an ecoregion of the tropical and subtropical grasslands, savannas, and shrublands biome.">
</div>
<div class="column">
<img class="demo cursor" src="ve4.jpg" onclick="currentSlide(4)" style="width:100%; height: 250px;" alt="Mérida is the quintessential touristic city in Venezuela, being one of the most sought-after destinations by national and international travelers.">
</div>
<div class="column">
<img class="demo cursor" src="ve5.jpg" onclick="currentSlide(5)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="ve6.jpg" onclick="currentSlide(6)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
</div>
</div>
</div>
</div>
<hr>
<h2>Colombia</h2><br>
<div id="co" class="row" style="width:100%">
<div class="column">
<img src="co1.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="column">
<img src="co2.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="column">
<img src="co3.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="column">
<img src="co4.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="column">
<img src="co5.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="column">
<img src="co6.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<div class="column">
<img src="co7.jpg" style="width:100%; height: 70%;" onclick="openModal();currentSlide(7)" class="hover-shadow">
</div>
<!-- The Modal/Lightbox -->
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 7</div>
<img src="co1.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 7</div>
<img src="co2.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 7</div>
<img src="co3.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 7</div>
<img src="co4.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 7</div>
<img src="co5.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 7</div>
<img src="co6.jpg" style="width:100%; height: 600px;">
</div>
<div class="mySlides">
<div class="numbertext">7 / 7</div>
<img src="co7.jpg" style="width:100%; height: 600px;">
</div>
<!-- Next/previous controls -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail image controls -->
<div style="width: 100%; background-color: black;" class="row">
<div class="column">
<img class="demo cursor" src="co1.jpg" onclick="currentSlide(1)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co2.jpg" onclick="currentSlide(2)" style="width:100%; height: 250px;" alt="Barrio House Neighborhood">
</div>
<div class="column">
<img class="demo cursor" src="co3.jpg" onclick="currentSlide(3)" style="width:100%; height: 250px;" alt="Sunset in Llanos - The Llanos is a vast tropical grassland plain situated to the east of the Andes in Colombia and Venezuela, in northwestern South America. It is an ecoregion of the tropical and subtropical grasslands, savannas, and shrublands biome.">
</div>
<div class="column">
<img class="demo cursor" src="co4.jpg" onclick="currentSlide(4)" style="width:100%; height: 250px;" alt="Mérida is the quintessential touristic city in Venezuela, being one of the most sought-after destinations by national and international travelers.">
</div>
<div class="column">
<img class="demo cursor" src="co5.jpg" onclick="currentSlide(5)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co6.jpg" onclick="currentSlide(6)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
<div class="column">
<img class="demo cursor" src="co7.jpg" onclick="currentSlide(7)" style="width:100%; height: 250px;" alt="Maracaibo is a city and the municipal seat of Maracaibo Municipality in northwestern Venezuela, on the western shore of the strait that connects Lake Maracaibo to the Gulf of Venezuela.">
</div>
</div>
</div>
</div>
</div>
<hr>
<script src="wwr.js"></script>
</body>
</html>
I need here when I call this div active it only because my javascript code use one id for all these divs this is my javascript take id from inside div:
// Open the Modal
function openModal() {
document.getElementById("myModal").style.display = "block";
}
// Close the Modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
any ideas?? and thank you.