Crear un mapa de imagen es una manera de determinar zonas activas dentro de una imagen. Estas zonas activas pueden ser utilizadas para la navegación o para mostrar información cuando nos colocamos encima.
En este ejemplo lo que haremos será: crear un listado con una información determinada (los Beatles) y con CSS le aplicaremos la imagen de fondo. Nos mostrará otra imagen cuando el ratón se coloque sobre la foto y posteriormente cada zona determinada dejará ver la información de cada artista una vez se ejecuta el rollover.
Lo primero es escribir el código del listado que tenemos a continuación:
<body>
<h2>Mapa de Imágenes con CSS</h2>
<dl id="imap">
<dt>
<a id="title" href="#nogo" title="The Beatles">The Beatles</a>
</dt>
<dd id="picp">
<a id="paul" title="Paul McCartney" href="#nogo"><span>Paul McCartney - Bajo y Voces<br /><br />Liverpool, Inglaterra, 18 de junio de 1942 es un músico, cantante, compositor, emprendedor, productor musical y activista pro-derechos de los animales.</span></a>
</dd>
<dd id="picr">
<a id="ringo" title="Ringo Starr" href="#nogo"><span>Ringo Starr - Batería<br /><br />Liverpool, 7 de julio de 1940 fue un músico (cantante y compositor) y actor británico, reconocido por ser baterista del grupo The Beatles. </span></a>
</dd>
<dd id="picj">
<a id="john" title="John Lennon" href="#nogo"><span>John Lennon - Voces y Guitarra<br /><br />es el nombre artístico de John Winston Lennon, uno de los más famosos músicos y compositores de música pop y rock del siglo XX, tanto durante los años 60, al frente del grupo The Beatles, probablemente el más influyente de la historia de la música popular, como en los setenta, ya en solitario.</span></a>
</dd>
<dd id="picg">
<a id="george" title="George Harrison" href="#nogo"> <span>George Harrison - Voces y Guitarra<br /><br />fue un músico y compositor británico integrante de la legendaria banda The Beatles. Tras la disolución del grupo en 1970 siguió una prestigiosa carrera musical tanto en solitario.</span></a></dd>
</dl>
</body>
Posteriormente le aplicamos los estilos que determinarán el resultado final.
<style type="text/css">
body {
font-family: tahoma, arial, sans-serif;
}
#imap {
display:block;
width:400px;
height:240px;
background:url(images/beatles_basic.jpg);
position:relative;
}
#imap a#title {
display:block;
width:400px;
height:0;
padding-top:240px;
overflow:hidden;
position:absolute;
left:0; top:0;
background:transparent url(images/beatles_hover.jpg) no-repeat 400px 400px;
cursor:default;
}
* html #imap a#title {
height:240px; he\ight:0;
}
#imap a#title:hover {
background-position: 0 0;
z-index:10;
}
#imap dd {
position:absolute;
padding:0;
margin:0;
}
#imap #picp {
left:36px;
top:46px;
z-index:20;
}
#imap #picr {
left:113px;
top:76px;
z-index:20;
}
#imap #picj {
left:192px;
top:50px;
z-index:20;
}
#imap #picg {
left:262px;
top:60px;
z-index:20;
}
#imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {
display:block;
width:85px;
height:85px;
background:transparent url(images/hover.gif) -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
#imap a span, #imap a:visited span {
display:none;
}
#imap a#paul:hover, #imap a#ringo:hover, #imap a#john:hover, #imap a#george:hover {
background-position:0 0;
}
#imap a:hover span {
position:absolute;
width:388px;
display:block;
font-family:arial;
font-size:12px;
background:#fff;
color:#000;
border:1px solid #000;
padding:5px;
}
* html #imap a:hover span {
width:400px; w\idth:388px;
}
#imap a#paul:hover span {
left:-36px;
top:200px;
}
#imap a#ringo:hover span {
left:-113px;
top:170px;
}
#imap a#john:hover span {
left:-192px;
top:196px;
}
#imap a#george:hover span {
left:-262px;
top:186px;
}
#imap a span:first-line {
font-weight:bold;
font-style:italic;
}
</style>
Resultado final:
Mapa de Imágenes con CSS
- The Beatles
- Paul McCartney - Bajo y Voces
Liverpool, Inglaterra, 18 de junio de 1942 es un músico, cantante, compositor, emprendedor, productor musical y activista pro-derechos de los animales. - Ringo Starr - Batería
Liverpool, 7 de julio de 1940 fue un músico (cantante y compositor) y actor británico, reconocido por ser baterista del grupo The Beatles. - John Lennon - Voces y Guitarra
es el nombre artístico de John Winston Lennon, uno de los más famosos músicos y compositores de música pop y rock del siglo XX, tanto durante los años 60, al frente del grupo The Beatles, probablemente el más influyente de la historia de la música popular, como en los setenta, ya en solitario. - George Harrison - Voces y Guitarra
fue un músico y compositor británico integrante de la legendaria banda The Beatles. Tras la disolución del grupo en 1970 siguió una prestigiosa carrera musical tanto en solitario.
