Code pour visualiser une lampe DIY
Bon il est pas parfait... mais bon chat tp est ton ami
5/19/20252 min read
<div class="diy-simulator">
<p>🛠️ Simulateur de Lampe DIY</p>
<div class="lamp-preview">
<img id="lampBase" src="https://airlessdeco.fr/wp-content/uploads/2025/05/base-livre-lampe.png" alt="base" class="lamp-layer" />
<img id="lampShade" src="https://airlessdeco.fr/wp-content/uploads/2025/05/abat-jour-blanc1.png" alt="shade" class="lamp-layer shade" />
<div id="lampStyle" class="style-overlay"></div>
</div>
<div class="lamp-options">
<label>Base :</label>
<select onchange="updateLamp()" id="baseSelect">
<option value="wood">Bois</option>
<option value="metal">Métal</option>
<option value="books" selected>Livres</option>
</select>
<label>Style :</label>
<select onchange="updateLamp()" id="styleSelect">
<option value="none">Classique</option>
<option value="colorful">Coloré</option>
<option value="vintage">Vintage</option>
</select>
</div>
<div class="airless-link">
<a href="https://airlessdeco.fr" target="_blank" rel="noopener noreferrer">Découvrez plus sur Airless Deco</a>
</div>
</div>
<style>
.diy-simulator {
width: 60%;
max-width: 270px;
margin: 22px auto;
padding: 16px 18px;
border: 1px solid #ddd;
border-radius: 14px;
background: linear-gradient(to bottom, #fdfdfd, #f6f6f6);
font-family: 'Segoe UI', sans-serif;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease-in-out;
}
.diy-simulator p {
font-weight: bold;
margin-bottom: 18px;
font-size: 1rem;
}
.lamp-preview {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
margin: 0 auto 18px auto;
background: #fafafa;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.lamp-layer {
position: absolute;
width: 100%;
height: auto;
left: 0;
top: 0;
transition: opacity 0.3s ease;
}
.lamp-layer.shade {
top: -22px;
}
.style-overlay {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
top: 0;
left: 0;
border-radius: 10px;
transition: background-color 0.3s ease;
}
.lamp-options {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
select {
width: 60%;
margin: 0 auto;
padding: 8px;
font-size: 0.9rem;
border-radius: 7px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: border 0.3s;
display: block;
}
select:focus {
outline: none;
border-color: #888;
}
.airless-link {
margin-top: 20px;
font-size: 0.9rem;
}
.airless-link a {
color: #0073e6;
text-decoration: none;
font-weight: 600;
}
.airless-link a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.diy-simulator {
width: 85%;
padding: 14px 16px;
border-radius: 12px;
}
select {
width: 80%;
font-size: 0.85rem;
}
}
</style>
<script>
function updateLamp() {
const base = document.getElementById("baseSelect").value;
const style = document.getElementById("styleSelect").value;
const baseImg = document.getElementById("lampBase");
const shadeImg = document.getElementById("lampShade");
const styleLayer = document.getElementById("lampStyle");
// Bases
const baseMap = {
wood: "https://airlessdeco.fr/wp-content/uploads/2025/05/base-bois-lampe.png",
metal: "https://airlessdeco.fr/wp-content/uploads/2025/05/base-metal-lampe.png",
books: "https://airlessdeco.fr/wp-content/uploads/2025/05/base-livre-lampe.png"
};
// Styles (color overlay)
const styleMap = {
none: "transparent",
colorful: "rgba(255, 204, 0, 0.3)",
vintage: "rgba(160, 82, 45, 0.3)"
};
baseImg.src = baseMap[base];
shadeImg.src = "https://airlessdeco.fr/wp-content/uploads/2025/05/abat-jour-blanc1.png";
styleLayer.style.backgroundColor = styleMap[style];
}
updateLamp();
</script>