Skip to content

Instantly share code, notes, and snippets.

@jdbruxelles

jdbruxelles/Progression du projet.html

Last active January 7, 2023 21:36
Show Gist options
  • Save jdbruxelles/15caf5169d7236343f196810a2606af5 to your computer and use it in GitHub Desktop.
Save jdbruxelles/15caf5169d7236343f196810a2606af5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Progression du projet.html
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Using STIB image from https://www.bruxelles.be/stalingrad -->
<title>Progression du projet</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
max-width: 800px;
margin: auto;
}
img {
display: block;
width: 100%;
}
li {
display: inline-block;
border-radius: 5px;
cursor: pointer;
padding: 8px 12px;
font-weight: 600;
}
li:hover, li.current {
background: #79c605;
color: #fff;
}
</style>
</head>
<body>
<h1>Progression du projet</h1>
<hr/>
<img data-src="https://www.bruxelles.be/sites/default/files/demain/FR_0$.png"
src="https://www.bruxelles.be/sites/default/files/demain/FR_01.png"
draggable="false" alt="Progression" rel="noopener noreferrer"/>
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<br/>
<br/>
<hr/>
<p>Source schema <a href="https://www.bruxelles.be/stalingrad" target="_blank" rel="noopener noreferrer">bruxelles.be</a></p>
<script>
const image = document.querySelector("[data-src]");
const baseUrl = image.dataset.src;
document.querySelectorAll("ul > li").forEach((btn) => {
btn.addEventListener("click", function() {
document.querySelector(".current")?.classList.remove("current");
image.setAttribute("src", baseUrl.replace("$", btn.innerText));
this.classList.add("current");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment