Mapa de Andalucía
Haz clic en una provincia sobre la imagen para ver los detalles.
Dirección: –
Teléfono: –
Email: –
Más información en su web .andalucia-map-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: flex-start;
max-width: 1100px;
margin: 0 auto;
}
.mapa-visual-wrapper {
position: relative;
flex: 2;
min-width: 320px;
max-width: 650px;
line-height: 0;
}
.mapa-bg-jpg {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.mapa-overlay-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.provincia-path {
fill: transparent; /* 100% transparente sin alterar el fondo */
stroke: none; /* Sin bordes ni líneas visibles */
cursor: pointer; /* Mantiene el puntero de enlace activo */
}
.provincia-path:hover {
fill: transparent; /* Evita cualquier cambio de color al pasar el cursor */
stroke: none;
}
.info-card {
flex: 1;
min-width: 280px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.info-card h3 {
margin-top: 0;
color: #0f172a;
}
.info-card .desc {
color: #475569;
}
.info-card .btn-url {
display: inline-block;
margin-top: 1rem;
background: #2563eb;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
}
.info-card .btn-url:hover {
background: #1d4ed8;
} document.addEventListener(«DOMContentLoaded», function() {
const provincias = document.querySelectorAll(«.provincia-path»);
const infoCard = document.querySelector(«#info-provincia»);
const tituloEl = infoCard.querySelector(«h3»);
const descEl = infoCard.querySelector(«.desc»);
const dirSpan = infoCard.querySelector(«.dir span»);
const dirTel = infoCard.querySelector(«.tel span»);
const dirEma= infoCard.querySelector(«.ema span»);
const btnUrl = infoCard.querySelector(«.btn-url»); provincias.forEach(provincia => {
provincia.addEventListener(«click», function() {
tituloEl.textContent = this.getAttribute(«data-nombre»);
descEl.textContent = this.getAttribute(«data-desc»);
dirSpan.textContent = this.getAttribute(«data-dir»);
dirTel.textContent = this.getAttribute(«data-tel»);
dirEma.textContent = this.getAttribute(«data-ema»);
const url = this.getAttribute(«data-url»);
if(url && url.trim() !== «») {
btnUrl.href = url;
btnUrl.style.display = «inline-block»;
} else {
btnUrl.style.display = «none»;
}
});
});
});
