What's new
By:

HTML

Oo, may code akong maibibigay sa'yo para sa isang simpleng world map na may mga impormasyon kapag ito'y pinindot. Ito ay isang halimbawa ng HTML, CSS, at JavaScript code na magpapakita ng world map at magpapakita ng impormasyon kapag pinindot ang iba't ibang mga bansa.

HTML code:

HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>World Map</title>
  <style>
    #map {
      width: 800px;
      height: 500px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    var map = document.getElementById("map");

    map.addEventListener("click", function(event) {
      var country = event.target.getAttribute("data-country");
      var info = event.target.getAttribute("data-info");

      if (country && info) {
        alert("Country: " + country + "\nInfo: " + info);
      }
    });

  </script>
</body>
</html>

CSS code:

CSS: 
#map {
  width: 800px;
  height: 500px;
  background-color: lightgray;
}

Pagsasama-samahin ang mga code na ito sa isang HTML file at i-save ito bilang "world_map.html". Kapag i-open mo ito sa isang web browser, makikita mo ang isang world map na may kulay gray na background. Kapag pindutin mo ang anumang bansa sa mapa, lalabas ang isang alert box na nagpapakita ng pangalan ng bansa at impormasyon nito.

Pwede mong baguhin ang laki ng mapa gamit ang CSS code sa pamamagitan ng pagbabago ng mga halaga ng width at height properties. Maaari mo rin i-customize ang hitsura ng mapa at impormasyon gamit ang CSS. At kung gusto mo ng iba pang mga detalye tungkol sa mga bansa, maaari mong baguhin o dagdagan ang mga attributes ng div element sa HTML code.

Sana makatulong ito sa'yo!
 

Similar threads

About this Thread

  • 1
    Replies
  • 247
    Views
  • 1
    Participants
Last reply from:
Unknown user

New Topics

Trending Topics

Online now

Members online
491
Guests online
3,003
Total visitors
3,494

Forum statistics

Threads
2,307,037
Posts
29,175,833
Members
1,194,169
Latest member
BlackCorps
Back
Top