CSS Mapa de Imágenes

Advertencia:

Este hack sólo se ve y funciona con Internet Explorer. Ahora que he instalado Firefox me doy cuenta, toda vez que el hack original no hacía advertencia alguna al respecto.

-----------------------

Un ejemplo de la red (no tengo yo paciencia para estas cosas de las imágenes...), en concreto de Stu Nichols

Al pasar el ratón por encima del rostro de cada uno de los Beatles, se desplega una tooltip con sus datos... y bueno: es un truco interesante éste. Para quien tenga paciencia con estas cosas... porque a mí me ha costado un congo que la dichosa imagen se viera en mi blog :( (he tenido que optar por insertar una similar)

The Beatles

Paul McCartney - Bass Guitar and Vocals

Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.

Ringo Starr - Drums

Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.

John Lennon - Guitar and Vocals

In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.

George Harrison - Lead Guitar and Vocals

The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.

He colocado en mi plantilla, dentro del CSS, es decir: antes del cierre skin, el siguiente estilo para el mapa:

#imap {display:block; width:400px; height:240px; background:url(http://www.multinet.no/~jonarne/Hjemmesia/Favorittartister/beatles/beatles_6.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;}

Y en esta entrada he colocado el siguiente código::

<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 - Bass Guitar and Vocals<br /><br />Paul McCartney's song, Yesterday, recently voted the most popular song of the century by a BBC poll, was initially composed without lyrics. Paul used the working title 'scrambled eggs' before coming up with the final words.</span></a></dd>

<dd id="picr"><a id="ringo" title="Ringo Starr" href="#nogo"><span>Ringo Starr - Drums<br /><br />Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, when she wouldn't come out and play with Mia and the Beatles at a religious retreat in India.</span></a></dd>

<dd id="picj"><a id="john" title="John Lennon" href="#nogo"><span>John Lennon - Guitar and Vocals<br /><br />In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool contest principally because they called in posing as different people and voted for themselves numerous times.</span></a></dd>

<dd id="picg"><a id="george" title="George Harrison" href="#nogo"><span>George Harrison - Lead Guitar and Vocals<br /><br />The Beatles' last public concert was held in San Francisco's Candlestick Park on August 29, 1966.</span></a></dd>

</dl>

Me ha quedado algo "superpuesta" la imagen... pero ya digo: no había forma humana de que se me visualizara y... no encontré ninguna similar que me fuera con las tooltips (me desespera a mí esto de las imágenes, arg).

El caso es que se viera cómo funciona... y se ve :D

Pd: Sorry si me he confundido de "Beatle" al cambiar la imagen y no se corresponde el rostro con el nombre... es que los Beatles no fueron de mi generación y por eso no los conozco mucho.

Se me olvidaba: cada punto de la imagen donde se puede clickar (los rostros de cada Beatle) es una URL (en el código, en cada parte donde dice href="#nogo")... que yo no he rellenado. Quiere decir que pueden llenarse con la URL que cada quien desee para redirigir la imagen a donde se quiera.
De esta forma, una sola imagen nos puede llevar a, en este caso, cuatro direcciones (los Beatles de la imagen son cuatro, creo... es que ahora no me acuerdo).

Es muy útill para dirigir a las visitas por todos los apartados de la página... pero creo que bastante complicado de manejar para quen tenga algún problemilla de accesibilidad...