SummArg | Cursos y recursos para webmasters

01/12/2010

¿Cómo hacer mapas que resalten un área al pasar el puntero?

Antiguamente realizar un mapa con secciones clickeables era un verdadero dolor de cabeza y consistía en tomar una imagen del mapa deseado, cortarla en tantos trozos como links fueramos a insertar y luego unir todo eso con una tabla bastante complicada. Cada trozo de mapa tenía el link correspondiente.

En esta oportunidad les mostraremos como es posible minimizar la cantidad de imagenes utilizando CSS Sprites y además lograremos efectos antes harto tediosos en HTML y CSS.

Descargar el Codigo | Ver demo online

El mapa

Un mapamundi dividido en 6 continentes servirán para este ejemplo. Se aplicó diferente color en cada continente para dar mas claridad a la guía.

Por medio de una lista no-ordenada indicaremos los links de cada sección de nuestro mapa. El autor de la guía* escogió linkear a Wikipedia para informarnos sobre cada continente.

<ul id="continents">
    <li id="northamerica"><a href="http://en.wikipedia.org/wiki/North_America">North America</a></li>
    <li id="southamerica"><a href="http://en.wikipedia.org/wiki/South_America">South America</a></li>
    <li id="asia"><a href="http://en.wikipedia.org/wiki/Asia">Asia</a></li>
    <li id="australia"><a href="http://en.wikipedia.org/wiki/Australia">Australia</a></li>
    <li id="africa"><a href="http://en.wikipedia.org/wiki/Africa">Africa</a></li>
    <li id="europe"><a href="http://en.wikipedia.org/wiki/Europe">Europe</a></li>
</ul>

Para que funcione, se debe añadir el mapa como imagen de fondo de la lista, indicar la posición del fondo y el tamaño, el padding y el margin. También se establecerá la propiedad position: relative, ya que deberemos posicionar los elementos <li> de forma absoluta. Si tienen problemas entendiendo el posicionamiento de elementos les recomendamos fuertemente que revisen esta pequeña guía con ejemplos visuales: www.barelyfitz.com/screencast/html-training/css/positioning

El CSS de dicha lista:

ul#continents {
	list-style: none;
	background: url(images/map-color.png) no-repeat 0 0;
	position: relative;
	width: 580px;
	height: 268px;
	margin: 0;
	padding: 0;
}

A modo de ayuda visual mientras se escribe todo el código se recomienda colocar un borde de 1px para tener noción del área que estamos marcando y verificar que coincida con cada continente.

ul#continents li {
	border: 1px solid #000;
	position: absolute;
}

Al finalizar este borde deberá borrarse.

Todos nuestros elementos li ahora tienen position:absolute, por lo que hay que declarar cual será esa posición con las propiedades top, right, bottom y left. Los valores de las posiciones pueden obtenerse desde Photoshop o cualquier programa de edición de imágenes.

#northamerica {
	width: 227px;
	height: 142px;
	top: 2px;
	left: 0px;
}
#southamerica {
	width: 108px;
	height: 130px;
	top: 131px;
	left: 76px;
}
#africa {
	width: 120px;
	height: 140px;
	top: 83px;
	left: 209px;
}
#europe {
	width: 120px;
	height: 84px;
	top: 1px;
	left: 211px;
}
#asia {
	width: 215px;
	height: 175px;
	top: 1px;
	left: 283px;
}
#australia {
	width: 114px;
	height: 95px;
	top: 152px;
	left: 432px;
}

Para que todo el elemento <li> sea clickeable, debemos agregar:

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

Y con esto ya tenemos un mapamundi prolijo, sin tablas ni recortes y con áreas clickeables en pocas líneas de código.

Cambiar imagen cuando el puntero se posiciona sobre un continente

Utilizando CSS background-image Sprites reemplazamos la imagen anterior por la siguiente:

CSS para colocar nuestro nuevo mapa:

ul#continents {
	list-style: none;
	background: url(images/map.png) no-repeat 0 0;
	position: relative;
	width: 580px;
	height: 268px;
	margin: 0;
	padding: 0;
}

Noten que estamos mostrando solo la parte superior del mapa, reservando las áreas grises (inferiores) para ser mostradas en una posición determinada mas adelante.

ul#continents li a:hover {
	background: url(images/map.png) no-repeat 0 0;
}
ul#continents li#northamerica a:hover {
	background-position: 0 -270px;
}

Al accionar el estado hover, el fondo de la imagen para esa sección se mueve 270 pixeles hacia abajo (se expresa con un valor negativo), quedando visible nuestro continente gris.

El resto de los continentes quedarían como sigue.

ul#continents li#southamerica a:hover {
	background-position: -226px -273px;
}
ul#continents li#africa a:hover {
	background-position: -209px -417px;
}
ul#continents li#europe a:hover {
	background-position: -22px -427px;
}
ul#continents li#asia a:hover {
	background-position: -363px -268px;
}
ul#continents li#australia a:hover {
	background-position: -412px -455px;
}

Crear un tooltip sobre cada continente

Ya hemos hablado en otras oportunidades sobre los tooltips, esas pequeñas etiquetas que se abren a modo de popup cuando pasamos el puntero del mouse sobre un elemento. En dichas oportunidades mencionabamos plugins para hacer un tooltip con efectos impactantes, pero también pueden hacerse sólo con CSS como veremos a continuación.

ul#continents {
	list-style: none;
	background: url(images/map.png) no-repeat 0 0;
	position: relative;
	width: 580px;
	height: 268px;
	margin: 0;
	padding: 0;
}
ul#continents li {
	position: absolute;
}
ul#continents li a{
	display: block;
	height: 100%;
}

En nuestro HTML colocaremos dentro de cada <li> el contenido del tooltip entre etiquetas <span>.

<ul id="continents">
    <li id="northamerica"><a href="http://en.wikipedia.org/wiki/North_America"><span>North America</span></a></li>
    <li id="southamerica"><a href="http://en.wikipedia.org/wiki/South_America"><span>South America</span></a></li>
    <li id="asia"><a href="http://en.wikipedia.org/wiki/Asia"><span>Asia</span></a></li>
    <li id="australia"><a href="http://en.wikipedia.org/wiki/Australia"><span>Australia</span></a></li>
    <li id="africa"><a href="http://en.wikipedia.org/wiki/Africa"><span>Africa</span></a></li>
    <li id="europe"><a href="http://en.wikipedia.org/wiki/Europe"><span>Europe</span></a></li>
</ul>

Ahora lo que queremos lograr es que cada <span> permanezca oculto hasta que el usuario pase el puntero del mouse sobre un continente:

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

Finalmente para embellecer un poco los tooltips se utilizará el siguiente código:

<ul id="continents">
    <li id="northamerica">
        <a href="http://en.wikipedia.org/wiki/North_America">
            <span>
                <strong>North America</strong>
                Population: 528,720,588
            </span>
        </a>
    </li>
    <li id="southamerica">
   		<a href="http://en.wikipedia.org/wiki/South_America">
            <span>
                <strong>South America</strong>
                Population: 385,742,554
            </span>
        </a>
    </li>
    <li id="asia">
    	<a href="http://en.wikipedia.org/wiki/Asia">
            <span>
                <strong>Asia</strong>
                Population: 3,879,000,000
            </span>
        </a>
    </li>
    <li id="australia">
    	<a href="http://en.wikipedia.org/wiki/Australia">
            <span>
                <strong>Australia</strong>
                Population: 21,807,000
            </span>
        </a>
    </li>
    <li id="africa">
        <a href="http://en.wikipedia.org/wiki/Africa">
        <span>
            <strong>Africa</strong>
            Population: 922,011,000
        </span>
        </a>
    </li>
    <li id="europe">
        <a href="http://en.wikipedia.org/wiki/Europe">
            <span>
                <strong>Europe</strong>
                Population: 731,000,000
            </span>
        </a>
    </li>
</ul>

Y finalmente un poco de estilo para el texto del <span>.

ul#continents li a{
	display: block;
	height: 100%;
	text-decoration: none;
}
ul#continents li a:hover span {
	display: block;
	padding: 5px;
	width: 150px;
	background: #000;
	position: relative;
	top: 50%;
	font: 11px Arial, Helvetica, sans-serif;
	opacity: .75;
	filter:alpha(opacity=75);
	color: #FFF;
}

Descargar el Codigo | Ver demo online

* Esta guía es una adaptación al español de noobcube.com con algunos agregados nuestros.

Dejar un comentario

  1. alesysnet

    Muchas gracias por tu articulo, me fue muy util….

  2. Cambio Organizacional

    Hola
    Me agradó la forma en que abarca sobre el tema.
    Continuaré regresando esta web para seguir aprendiendo sobre el contenido.

    Gracias

  3. Javier

    Muy bueno este articulo, gracias desde Venezuela.

  4. Diego

    Esta muy bueno el artículo, lastima que el link de descarga está caído.

  5. Muy bueno el articulo, intentare hacer esto porque de verdad ocupo esto Gracias.

Dejar un comentario