Mapa antiguo con filacteria
Un mapa de pergamino de la península: cada ciudad despliega una cinta de estandarte con su nombre romano.
Ajustes
Código
<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>hoy Lisboa</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>hoy 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>hoy Toledo</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>hoy Cádiz</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>hoy Barcelona</span></span></button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Un mapa de estilo antiguo sobre pergamino con la costa entintada, ríos, pequeñas montañas, un velero y un cartucho con el título. Cada ciudad es un pequeño castillo pulsable. Pasa o enfoca uno y una cinta crema con colas en punta se despliega desde el centro con el nombre romano en cursiva y el nombre actual debajo, como las filacterias de los mapas renacentistas.
El color principal define la tinta de la cinta y los castillos, y el secundario el dibujo del mapa. Cambia el contorno y los lugares por tu región, un mundo de fantasía o un mapa de viñedos, y ancla las cintas a izquierda o derecha cerca de los bordes.