{FITP} Tulpendag!

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:465px; height: 252px; top: 242px; left: 120px;color:white"><b><i>...iets wat je waarschijnlijk nog niet wist, maar vandaag is het Nationale Tulpen Dag! Voor als je dit niet kent, dit is iets wat in Amsterdam wordt gevierd. Met dit in mijn achterhoofd wist ik gelijk wat voor lookcompetitie leuk is voor deze maand: Fitting in The Picture, met tulpen op de achtergrond!</i>
<br><br>
<u>Wat moet je doen?</u><br>
De naam spreekt voor zich, bij fitting in the picture  maak je een look die zo goed mogelijk bij de afbeelding past! De afbeelding is degene op de achtergrond, maar deze zal ik ook neerzetten als je klikt op "Picture". <br><br>

<u>Deadline & Prijzen</u><br>
Meedoen kan tot en met volgende week zaterdag 24 januari 23:59 uur. Ergens na deze dag volgt de uitslag op onze Sociale Media (ik weet nog niet welke). De leukste looks krijgen een klein creditprijsje. <br><br>

Veel plezier! Ik kijk uit naar de inzendingen. <br>
Liefs, Anouk</b>
</div>
<img src="https://i.imgur.com/fUwL9HY.png" usemap="#image-map"></div>

<map name="image-map">
    <area target="_blank" alt="topic" title="topic" href="https://virtualpopstar.com/social/forum?category=11&topic=992892" coords="105,491,315,539" shape="rect">
   <area data-popup="popupP" title="picture" href="javascript:void(0)"  coords="323,491,528,540" shape="rect">
</map>

<div id="popupP" class="popup"><img src="https://i.imgur.com/gBESqXU.png" alt="Afbeelding met tulpen"></div>


<script type="text/javascript">// <![CDATA[
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #fff; } ::-webkit-scrollbar-thumb {...

CSS

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

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

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

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



* {
  font-family: Arial, sans-serif;
  font-size: 13.5px;
}

JavaScript

import $ from "https://esm.sh/jquery"
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"
  })
})

$(".button").click(function () {
  var textBox = this.className.split(" ")[1]
  $(".hide").hide()
  $("." + textBox).show()
})