Carte ancienne à phylactère
Une carte sur parchemin de la péninsule Ibérique : chaque ville déroule une banderole avec son nom romain et son nom actuel.
Réglages
Code
<div class="uvq08-old"><div class="pg"><svg viewBox="0 0 120 90" aria-hidden="true"><polygon class="sd" points="20,15 32,12 47,15 60,14 70,17 82,21 92,23 100,26 96,31 90,37 84,44 82,51 87,58 82,64 77,71 69,76 59,80 50,82 44,83 38,79 32,74 24,75 18,73 20,63 17,55 18,48 20,41 18,30 16,22"/><polygon class="ld" points="20,15 32,12 47,15 60,14 70,17 82,21 92,23 100,26 96,31 90,37 84,44 82,51 87,58 82,64 77,71 69,76 59,80 50,82 44,83 38,79 32,74 24,75 18,73 20,63 17,55 18,48 20,41 18,30 16,22"/><path class="rv" d="M64 46C56 48 48 54 40 52S28 54 21 50M62 23C70 27 78 33 88 41M70 40C60 44 52 60 44 64S36 70 30 72"/><path class="mt" d="M30 20l3-4 3 4M36 18l3-4 3 4M70 22l2.5-3.5 2.5 3.5M76 24l2.5-3.5 2.5 3.5M58 66l2.5-3.5 2.5 3.5M64 64l2.5-3.5 2.5 3.5M46 36l2-3 2 3"/><path class="sh" d="M6 76h10l-2 3H8zM11 76V67M11 68l4 5h-4M11 69l-3.5 4h3.5"/><path class="wv" d="M4 60q2-1.5 4 0t4 0M100 50q2-1.5 4 0t4 0M18 86q2-1.5 4 0t4 0"/></svg><span class="cr" aria-hidden="true"><b>HISPANIA</b><span>ANNO MDLXX</span></span><button type="button" class="ct l" style="left:17.5%;top:55.6%" aria-label="Olisipo" aria-describedby="uvq08-old-0"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-0"><b>Olisipo</b><span>aujourd’hui Lisbonne</span></span></button><button type="button" class="ct c" style="left:27.5%;top:61.1%" aria-label="Emerita Augusta" aria-describedby="uvq08-old-1"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-1"><b>Emerita Augusta</b><span>aujourd’hui Mérida</span></span></button><button type="button" class="ct c pk" style="left:46.7%;top:56.7%" aria-label="Toletum" aria-describedby="uvq08-old-2"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-2"><b>Toletum</b><span>aujourd’hui Tolède</span></span></button><button type="button" class="ct c" style="left:32.5%;top:86.7%" aria-label="Gades" aria-describedby="uvq08-old-3"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-3"><b>Gades</b><span>aujourd’hui Cadix</span></span></button><button type="button" class="ct r" style="left:76.7%;top:33.3%" aria-label="Barcino" aria-describedby="uvq08-old-4"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V10h2.5V7H10v3h4V7h2.5v3H19v11h-5v-4h-4v4z"/></svg><span class="rb" role="tooltip" id="uvq08-old-4"><b>Barcino</b><span>aujourd’hui Barcelone</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
Une carte à l’ancienne sur parchemin avec une côte à l’encre, des rivières, de petits reliefs, un voilier et un cartouche pour le titre. Chaque ville est un petit château cliquable. Au survol ou au focus, une banderole crème aux extrémités fourchues se déroule depuis le centre avec le nom romain en italique et le nom actuel dessous, comme les phylactères des cartes de la Renaissance.
La couleur principale règle l’encre de la banderole et les châteaux, la secondaire le dessin de la carte. Remplace le contour et les lieux par ta région, un monde imaginaire ou une carte de vignobles, et ancre les banderoles à gauche ou à droite près des bords.