Tutorial: Creación de imágenes mapeadas dinámicas (con hover propio) HTML + CSS

[Chuiso]

Buenas amigos, pues como acabo de aprender a hacerlo os enseño rápidamente como crear este tipo de imágenes mapeadas, que para muchos blogs/webs pueden venir muy bien. Os enseño como ha quedado el mío:

Enlace eliminado

Podéis ver el mapita del mundo en el sidebar. Cuando pasas por cada continente se oscurece un poco y tiene enlaces a cada categoría. Algo más complejo y bonito sería el de la web segundamano.es, que es muy similar.

Realizar estos mapeados no es complicado, pero sí un poco tedioso. Es más que posible que se puede hacer igual con dreamweaver y otros programas de forma más fácil, yo os enseñaré como hacerlo casi "a pelo" (porque españa y yo somos así :witless🙂. Otra de las ventajas es que no hay que usar java, ni scripts ni nada. Sólo con html y algo de css sale perfectamente (menos carga para tu web).

1. Primero que todo escojo la imagen que quiero mapear, elijo las zonas de corte y con Photoshop doblo la imagen en dos. La imagen de abajo la oscurezco, le doy brillo o como queréis que quede cuando pase el mouse por encima. Ahora con las partes divididas que serían los "hovers" en el css, las repartís por abajo. Yo las he puesto más o menos seguidas. Quedaría algo así:

Enlace eliminado

2. Como veis arriba está la imagen completa y abajo los cachitos (5, uno por cada continente). Guardad la imagen como GIF y con fondo transparente (Enlace eliminado).

3. Ahora toca tirar de código:
Dónde vaya a ir la imagen mapeada colocamos los enlaces. Por ejemplo en mi caso:

<ul id="m-east">
<li id="ame"><a href="http://vidaemigrante.com/c/america/" >América</a></li>
<li id="oce"><a href="http://vidaemigrante.com/c/oceania/" >Oceanía</a></li>
<li id="afri"><a href="http://vidaemigrante.com/c/africa/" >África</a></li>
<li id="eur"><a href="http://vidaemigrante.com/c/europa/" >Europa</a></li>
<li id="asi"><a href="http://vidaemigrante.com/c/asia/" >Asia</a></li>
</ul>

4. Ahora vamos a mapearlo todo con el CSS. Vamos al css.php y al final, yo por ejemplo añadí este código:

#m-east {
position: relative;
width: 299px;
height: 216px;
background: #fff url(URL DE LA IMAGEN QUE HEMOS CREADO) no-repeat;
padding: 0;
}

#m-east li {
display: block;
position: absolute;
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
}

#m-east a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;
}

/*  Hasta aquí estamos definiendo los id que hemos creado, por lo tanto esto no lo toquéis mucho, no es necesario al menos */

#ame {
left: 0px;
top: -3px;
}

#ame a {
width: 131px;
height: 220px;
}

#ame a:hover {
background: url(IMAGEN CREADA) -2px -220px no-repeat;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

#oce {
left: 234px;
top: 155px;
z-index: 30;
}

#oce a {
width: 44px;
height: 45px;
}

#oce a:hover {
background: url(IMAGEN CREADA) -3px -574px no-repeat;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

#afri {
left: 116px;
top: 120px;
z-index: 20;
}

#afri a {
width: 70px;
height: 71px;
}

#afri a:hover {
background: url(IMAGEN CREADA) 0px -443px no-repeat;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

#eur {
left: 123px;
top: 59px;
z-index: 30;
}

#eur a {
width: 61px;
height: 62px;
}

#eur a:hover {
background: url(IMAGEN CREADA) -6px -512px no-repeat;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

#asi {
left: 155px;
top: 17px;
z-index: 10;
}

#asi a {
width: 131px;
height: 145px;
}

#asi a:hover {
background: url(IMAGEN CREADA) -164px -227px no-repeat;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

5. Puede parecer muy lioso todo, pero voy a explicar uno sólo de los mapeos para que se vea más claro:

#ame {
left: 0px;
top: -3px;
}

AQUÍ ESTAMOS LLAMANDO A "AME" (AMÉRICA), Y ESTAMOS DICIENDO DONDE ESTÁ COLOCADA. CONTANDO DESDE LA ESQUINA SUPERIOR IZQUIERDA, A 0PX DE LA IZQUIERDA Y A -3PX DE ARRIBA.

#ame a {
width: 131px;
height: 220px;
}

AHORA, DESDE EL PUNTO DEFINIDO ARRIBA, DEBEMOS DEFINIR EL CUADRADO ENTERO EN EL QUE AL PASAR POR ENCIMA CAMBIE LA IMAGEN.


#ame a:hover {
background: url(IMAGEN CREADA) -2px -220px no-repeat;
opacity: 0.6;
-ms-filter:"progid😀XImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

AQUÍ DEFINIMOS DE NUEVO LA POSICIÓN DE LA IMAGEN QUE SALGA CUANDO ESTÁ EL CURSOR ENCIMA, EL RESTO DE CÓDIGO ES PARA QUE TENGA ALGO DE OPACIDAD.

Seguramente la primera vez os cueste. Para localizar las posiciones yo usaba el mismo paint. A base de ensayo error sale fácil. Ir cuadrando el tamaño y la posición para que encaje la imagen original con la que aparece encima (el hover). Esto mismo hay que hacerlo con cada imagen que se quiera mapear y que al pasar por encima salga otra imagen y de esa impresión de dinamismo. También le podéis poner title a los enlaces para que salga el iconito del nombre. Además, la función z-index que habréis visto da prioridad a un mapeo frente a otro, para que un mapeo muy grande que pisa a otro le deje hueco (a más z-index, mas espacio gana del que ambos mapeos ocupan).

No sé explicarlo mejor así que si hay dudad ponerlo por aquí.
Fuente original: Enlace eliminado
Enlace eliminado

 

[tamik]

Muy bueno el tutorial! Seguramente que lo usaré en otro momento para otra cosa! :star2:

 

[sanyeta1992]

Gracias! servirá demasiado.

 

[Eliop]

Gracias amigo, tengo pensado hacerlo con un sitio 🙂.
Saludos.

 

[Chuiso]

Gracias! servirá demasiado.

Muy bueno el tutorial! Seguramente que lo usaré en otro momento para otra cosa! :star2:

Gracias amigo, tengo pensado hacerlo con un sitio 🙂.
Saludos.

De nada! Me han ayudado mucho en Forobeta y de vez en cuando hay que devolver los favores de la manera que se pueda 🙂