Pequeño flashback de mi época de diseñador

He rescatado de entre mis antiguos documentos una carpeta con una imagen y algo de código, pertenecientes a mi antigua etapa como diseñador, y concretamente al proyecto de la página web del Ayuntamiento de Sevilla, sevilla.org.

En esa ocasión, se trataba de crear un mapa de los distritos de Sevilla capital, sensible al ratón, produciendo un resaltado en el amarillo albero corporativo y generando un hiperenlace a otras secciones del site.

Distritos de Sevilla, para sevilla.org

Por una parte, requería de un poco de html y un poco de CSS; por otro, significaba manejar, con precisión de píxel, una imagen vectorial del mapa, apoyándose también en un programa de edición de mapa de bits para poder establecer con exactitud las distancias entre diferentes zonas de la misma imagen:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distritos de Sevilla, para sevilla.org</title>
<style type="text/css">
ul#distritos {
	list-style: none;
	background: url(frusod.png) no-repeat 0 0;
	position: relative;
	width: 400px;
	height: 350px;
	margin: 0;
	padding: 0;
}

ul#distritos li {
	position: absolute;
}

ul#distritos li a{
	display: block;
	height: 100%;
	text-indent: -9000px;
}

#norte {
	width: 255px;
	height: 122px;
	top: 12px;
	left: 6px;
}

#triana {
	width: 69px;
	height: 124px;
	top: 82px;
	left: 13px;
}

#macarena {
	width: 52px;
	height: 49px;
	top: 90px;
	left: 65px;
}

#casco {
	width: 45px;
	height: 67px;
	top: 124px;
	left: 49px;
}

#pablo {
	width: 79px;
	height: 49px;
	top: 120px;
	left: 90px;
}

#este {
	width: 240px;
	height: 126px;
	top: 72px;
	left: 155px;
}

#nervion {
	width: 54px;
	height: 43px;
	top: 154px;
	left: 79px;
}

#cerro {
	width: 92px;
	height: 49px;
	top: 167px;
	left: 124px;
}

#sur {
	width: 98px;
	height: 67px;
	top: 179px;
	left: 71px;
}

#remedios {
	width: 61px;
	height: 146px;
	top: 179px;
	left: 10px;
}

#bellavista {
	width: 90px;
	height: 131px;
	top: 207px;
	left: 68px;
}

ul#distritos li a:hover {
	background: url(frusod.png) no-repeat 0 0;
}

ul#distritos li#norte a:hover {
	background-position: -6px -376px;
}

ul#distritos li#triana a:hover {
	background-position: -13px -519px;
}

ul#distritos li#macarena a:hover {
	background-position: -65px -1150px;
}

ul#distritos li#casco a:hover {
	background-position: -49px -729px;
}

ul#distritos li#pablo a:hover {
	background-position: -90px -1282px;
}

ul#distritos li#este a:hover {
	background-position: -155px -677px;
}

ul#distritos li#nervion a:hover {
	background-position: -79px -1215px;
}

ul#distritos li#cerro a:hover {
	background-position: -124px -605px;
}

ul#distritos li#sur a:hover {
	background-position: -71px -1341px;
}

ul#distritos li#remedios a:hover {
	background-position: -10px -825px;
}

ul#distritos li#bellavista a:hover {
	background-position: -68px -984px;
}

ul#distritos li a span {
	display: none;
}

ul#distritos li a:hover span {
	display: block;
}

</style>



<ul id="distritos">
    <li id="norte"><a href=""><span>Norte</span></a></li>
    <li id="triana"><a href=""><span>Triana</span></a></li>    
    <li id="pablo"><a href=""><span>San Pablo - Santa Justa</span></a></li>
    <li id="este"><a href=""><span>Este-Alcosa-Torreblanca</span></a></li>
    <li id="macarena"><a href=""><span>Macarena</span></a></li>
    <li id="casco"><a href=""><span>Casco Antiguo</span></a></li>
    <li id="nervion"><a href=""><span>Nervión</span></a></li>
    <li id="cerro"><a href=""><span>Cerro-Amate</span></a></li>
    <li id="sur"><a href=""><span>Distrito Sur</span></a></li>
    <li id="remedios"><a href=""><span>Los Remedios</span></a></li>
    <li id="bellavista"><a href=""><span>Bellavista - La Palmera</span></a></li>
</ul>

La imagen de base no es otra que esta:

(*archivo «.png» utilizado como base para el efecto*)

Este código es de 2012; a día de hoy, tiene ya diez años. Aun así, y después de varias actualizaciones de la página sevilla.org, se nota que fue una feliz idea, puesto que aún hoy se conserva el mismo espíritu en la ilustración interactiva que sustituye a mi antigua creación: https://www.sevilla.org/#home-distrito

Un apunte: al archivo png que utilicé como base lo llamé frusod.png, a modo de easter egg en honor al gran Fernando Ruso, responsable de imagen del Ayuntamiento de Sevilla por aquella época, y con el cual me enorgullezco de haber colaborado.

Pequeño flashback de cuando trabajaba de diseñador