Alojamientos en la zona
Épingles de prix sur carte
Des prix sur une carte : au survol, l'un d'eux fonce, grandit et montre le logement avec sa note.
Réglages
Code
<div class="uv-tmp"><p>Logements dans le quartier</p><div class="mp"><button type="button" style="left:22%;top:34%"><b>85 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Casa Lúa</span><span class="rt">★ 4,9</span></span></button><button type="button" style="left:58%;top:22%"><b>120 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Loft du Port</span><span class="rt">★ 4,8</span></span></button><button type="button" style="left:72%;top:62%"><b>64 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Studio Soleil</span><span class="rt">★ 4,7</span></span></button><button type="button" style="left:36%;top:70%"><b>98 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Attique Vert</span><span class="rt">★ 5,0</span></span></button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Les sites de réservation et de location placent les prix directement sur la carte pour comparer d'un coup d'œil. Chaque épingle blanche avec un prix se trouve sur un plan stylisé ; au survol ou au focus, elle devient foncée, grandit, passe au premier plan et ouvre au-dessus une petite fiche avec vignette, nom du logement et note.
Les épingles sont des boutons positionnés en pourcentages, elles restent en place à toutes les tailles. Remplace la carte dessinée par une vraie. Garde le balisage des épingles et relie chacune à son annonce.