Un poco más allá de las imágenes (3ª parte)

Este es el segundo ejemplo es el más complejo. Utiliza sólo CSS y HTML para transformar una imagen simple en un mapa mezclando técnicas diversas.

El efecto final se parece mucho a uno muy conocido para cualquiera que haya utilizado los servicios de Flickr y está basado en una serie de artículos de Frank Manno.

VER:1ª parte

VER: 2ª parte

El primer paso es crear un archivo con dos imágenes iguales, en este caso, una debajo de la otra. La imagen superior es la imagen normal, la inferior será la que modificaremos, dibujando cierto sectores que son los que utilizaremos para crear el efecto rollover.

El código HTML está formado por una lista de definiciones DL, que contiene los términos en la etiqueta DT y será seguida con la correspondiente descripción en la etiqueta DD ¿muy confuso? es cierto, aquí está el código:

<div>
<img style="display: none;" src="imagenNORMAL" width="alto" height="ancho" />
<dl id="demoMapa">
<dt>Titulo optativo</dt>
<dd id="mapaUno"><a href="#"><span>Texto UNO</span></a></dd>
<dt>Titulo optativo</dt>
<dd id="mapaDos"><a href="#"><span>Texto DOS</span></a></dd>
<dt>Titulo optativo</dt>
<dd id="mapaTres"><a href="#"><span>Texto TRES</span></a></dd>
<dt>Titulo optativo</dt>
<dd id="mapaCuatro"><a href="#"><span>Texto CUATRO</span></a></dd>
</dl>
</div>

donde la imagenNORMAL es la imagen que se verá en el caso que el navegador no soporte CSS.

A la etiqueta DL que será el contenedor de todo, la llamamos demoMapa y luego le daremos propiedades.

Habrá tantas etiquetas DD como sectores ocultos pongamos y, a cada uno, le daremos un nombre, en este caso: mapaUno, mapaDos, mapaTres y mapaCuatro para identificarlos.

Las propiedades de estilo serán las siguientes:

dd {margin: 0; padding: 0; position: absolute;}

dl#demoMapa {
width: ancho; height: alto; /* de la imagen a mostrar */
margin: 0; padding: 0; position: relative;
background: transparent url(URL_imagen) top left no-repeat;
}

/* todos los sectores se ocultan */
dd#mapaUno a span, dd#mapaDos a span, dd#mapaTres a span, 
dd#mapaCuatro a span {display: none;}

/* efecto rollover sobre los sectores (hotspots) */
dd#mapaUno a:hover span, dd#mapaDos a:hover span, 
dd#mapaTres a:hover span, dd#mapaCuatro a:hover span  {
display: block;
position: absolute;
left: 0px;
top:100%;
width: anchoSector; /* ancho de cada sector oculto, en este caso, 50px */
background-color: color; /* el color de fondo del sector */
[... propiedades de las fuentes y colores ...]
}

/* propeidades de los vínculos para el rollover */
dd#mapaUno a, dd#mapaDos a, dd#mapaTres a, dd#mapaCuatro a  {
position: absolute;
text-decoration: none;
width:anchoSector; height:altoSector; /* ancho/alto de cada sector (50px) */
}

dd#mapaUno a:hover, dd#mapaDos a:hover, dd#mapaTres a:hover,
dd#mapaCuatro a:hover {
background: url(IMGmapa.jpg) no-repeat;
}

/* definición de cada sector oculto para este ejemplo */

/* ¿dónde está el sector en la imagen superior? */
dd#mapaUno {left: 11px; top: 38px;}

/* ¿dónde está el sector en la imagen inferior? */
dd#mapaUno a:hover{background-position: -11px -288px;}

dd#mapaDos {left: 77px; top: 80px;}
dd#mapaDos a:hover{background-position: -77px -330px;}

dd#mapaTres {left:20px; top: 115px;}
dd#mapaTres a:hover{background-position: -20px -365px;}

dd#mapaCuatro {left: 200px; top: 93px;}
dd#mapaCuatro a:hover{background-position: -200px -343px;}

Aquí está el resultado final. Si pasamos el puntero del mouse sobre la imagen, podrán encontrarse cuatro áreas que se resaltan y en las cuales hay un texto:

UNO

DOS

TRES

CUATRO

Un poco más simple pero no menos efectivo es el método desarrollado por leandono's blog para simular la opción agregar notas dentro de una imagen (Add Note) en Flickr.

En este caso, se usan varios DIVs anidados que son los que crean las "zonas activas". Todos ellos, se incluyen dentro de un DIV mayor, que contendrá la imagen principal de fondo. La idea es que, cuando el usuario se acerca a una zona activa, se muestre el correspondiente comentario.

También en este ejemplo se emplean cuatro notas diferentes (una por cada integrante del grupo) por lo que, el código HTML será algo así:

<div id="imagenNota">
<div class="uno">
<a class="laNota" href="#">
     <div class="contorno">
          <div class="texto">Charlie Watts</div>
     </div>
</a>
</div>
<div class="dos">
<a class="laNota" href="#">
     <div class="contorno">
          <div class="texto">Keith Richards</div>
     </div>
</a>
</div>
<div class="tres">
<a class="laNota" href="#">
     <div class="contorno">
          <div class="texto">Mick Jagger</div>
     </div>
</a>
</div>
<div class="cuatro">
<a class="laNota" href="#">
     <div class="contorno">
          <div class="texto">Ron Wood</div>
     </div>
</a>
</div>
</div>

La clave del código es el parámetro position, si lo establecemos como absolute podemos manejar el lugar donde queremos que aparezcan los sectores. Este es el código CSS que corresponde al ejemplo:

#imagenNota {
position: relative; /* muy importante */
width: 400px; height: 300px; /* ancho y alto de la imagen  */
background:url(URL_imagen) no-repeat;
}

a.laNota {
position: absolute; /* muy importante */
width: 100px; height: 120px; /* ancho y alto de cada rectángulo */
color:#000000 !important; /* sobrescrir el estilo por defecto */
text-decoration:none !important;
}

a.laNota:hover {border: 1px solid #FFFFFF;} /* el borde interior */

/* el borde exterior */
.contorno {
display: block;
position: absolute;
width: 104px; height: 124px; /* un poco más grande que cada sector */
left: -3px; top: -3px; /* posición del sector */
}

a.laNota:hover .contorno {border: 1px solid #D4D82D;}

/* la posición de cada nota */
.uno a.laNota {left: 8px; top: 25px;}
.dos a.laNota {left: 102px; top: 30px;}
.tres a.laNota {left: 195px; top: 10px;}
.cuatro a.laNota {left: 280px; top: 25px;}

/* reglas de estilo para el texto de cada nota */
.texto {
position: absolute;
left: -10000px; bottom: -20px;  /* ocultarlo, sacándolo de la pantalla */
width: 100px;
text-align: center;
background-color: #FFFFD3;
-moz-border-radius: 8px; /* bordes redondeados (sólo en Firefox) */
}

a.laNota:hover .texto {left: 0;}

Charlie Watts

Keith Richards

Mick Jagger

Ron Wood