SOCIAL MEDIA DAY

by bluesweater

HTML

<!-- Met onderstaande code kun je een tekstvak toevoegen. Hiervoor moet je de breedte (width), hoogte (heigth), bovenste grens (top) en linker grens (left) nodig. Deze waardes kun je vervolgens invullen achter de juiste plek. -->

<div align="left">
<div style="overflow: auto; position: absolute; width: 615px; height: 190px; top: 546px; left: 46px;">Vandaag is het dag van Sociale Media! Vandaar dat er een actie is bedacht, waarvoor je naar onze sociale media pagina's moet gaan! Alleen onze YouTube is er niet bij betrokken. Op <a href="https://virtualpopstar.com/social/forum?category=3&topic=988996" target="_blank" style="color:black">dit topic</a> vind je de linkjes naar onze pagina's. <br><br>

<b>Hoe werkt het?</b><br>
Hierboven klik je op een platform en dan vind je een afbeelding met erin 3 hints. Elke hint verwijst naar <b>1 post op dat platform</b>. Bij deze post (in de afbeelding/video of in de reacties) staat 1 letter. Vervolgens heb je 3 keer 3 letters. Per platform worden de 3 letters op de goede volgorde gegeven. Maar op welke volgorde de platformen zitten, moet je zelf bedenken! Uiteindelijk vind je een code van 9 letters, deze kun je claimen voor een leuke set! <br>

<a href="https://virtualpopstar.com/financial/couponclaim" target="_blank" style="color:black">Hier</a> kun je de code claimen. De code is geldig <b>tot en met zaterdag 6 juli</b>. Veel succes en een fijne Sociale Media dag!! <br><br>

Als je ergens niet uitkomt, reageer je vraag hieronder of mail Bluesweater of Nelena! Sommige hints zijn moeilijker dan andere, maar de posts zijn allemaal geplaatst na februari 2024.
</div>
<img src="https://i.imgur.com/MpewlIC.png" alt="" usemap="#image-map" > </div>


<map name="image-map">
    <area target="" alt="Vraageken" title="Vraageken" href="" coords="83,430,60" shape="circle" data-popup="popup">
<!--Insta -->
    <area target="" alt="" title="" href="javascript:void(0)" coords="85,81,64" shape="circle" data-popup="popup2">
    
<!-- TikTok -->
...

CSS

.img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 100%;
  max-width: 100%;
}

.popup {
  display: none;
  position: absolute;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  padding: 10px;
  z-index: 1000;
  transform: translate(40%, -130%);
}

.popup img {
  max-width: 400px;
  max-height: 400px;
  border-radius: 5px;
}

.popup a {
  color: blue;
  text-decoration: underline;
}

* {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: black;
}

JavaScript

document.querySelectorAll('area[data-popup]').forEach(area => {
            area.addEventListener('click', function(event) {
                event.preventDefault();
                const popupId = this.getAttribute('data-popup');
                const popup = document.getElementById(popupId);

                // Hide any visible popups
                document.querySelectorAll('.popup').forEach(p => p.style.display = 'none');

                // Show the clicked popup
                const rect = this.getBoundingClientRect();
                popup.style.left = `${rect.left + window.scrollX}px`;
                popup.style.top = `${rect.bottom + window.scrollY}px`;
                popup.style.display = 'block';
            });
        });

        document.addEventListener('click', function(event) {
            if (!event.target.matches('area[data-popup]')) {
                document.querySelectorAll('.popup').forEach(p => p.style.display = 'none');
            }
        });

        document.querySelectorAll('.button').forEach(button => {
            button.addEventListener('click', function() {
                const textBoxClass = this.className.split(' ')[1];
                document.querySelectorAll('.hide').forEach(el => el.style.display = 'none');
                document.querySelector('.' + textBoxClass).style.display = 'block';
            });
        });