Mapa de Imágenes (II)

Otro ejemplo, de Stu Nichols

Map #3
Colours of the Rainbow

COLOURS
OF THE
RAINBOW

Red

Orange

Yellow

Green

Blue

Indigo

Violet

Se hace así:

Dentro de las definiciones de CSS de la plantilla, es decir: antes del cierre skin:

/* The Rainbow */



#cmap {display:block; width:360px; height:150px; background:#fff; position:relative; overflow:hidden; border:5px solid #000;font-family:arial; font-size:10px; font-weight:bold; text-align:center; text-transform:uppercase; margin:0 auto 2em auto;}

* html #cmap {width:370px; height:160px; w\idth:360px; he\ight:150px;}

#cmap a {color:#000; text-decoration:none;}

#red {display:block; width:360px; height:150px; position:absolute; left:0; top:0; background:#eee;}

#orange {display:block; width:330px; height:135px; position:absolute; left:15px; top:15px; background:#ddd;}

#yellow {display:block; width:300px; height:120px; position:absolute; left:30px; top:30px; background:#ccc;}

#green {display:block; width:270px; height:105px; position:absolute; left:45px; top:45px; background:#bbb;}

#blue {display:block; width:240px; height:90px; position:absolute; left:60px; top:60px; background:#aaa;}

#indigo {display:block; width:210px; height:75px; position:absolute; left:75px; top:75px; background:#999;}

#violet {display:block; width:180px; height:60px; position:absolute; left:90px; top:90px; background:#888;}





#cmap dt {display:block; width:150px; height:45px; position:absolute; padding-top:5px; left:105px; top:105px; background:#000; color:#fff; z-index:100;}



#red:hover {background:red; color:#fff;}

#orange:hover {background:orange; color:#fff;}

#yellow:hover {background:yellow; color:#000;}

#green:hover {background:green; color:#fff;}

#blue:hover {background:blue; color:#fff;}

#indigo:hover {background:indigo; color:#fff;}

#violet:hover {background:violet; color:#fff;}

En la entrada o donde se quiera colocar la imagen:

<h3>Map #3<br />Colours of the Rainbow</h3>

<dl id="cmap">

<dt>COLOURS<br />OF THE<br />RAINBOW</dt>

<dd><a id="red" title="Red" href="#nogo">Red</a></dd>

<dd><a id="orange" title="Orange" href="#nogo">Orange</a></dd>

<dd><a id="yellow" title="Yellow" href="#nogo">Yellow</a></dd>

<dd><a id="green" title="Green" href="#nogo">Green</a></dd>

<dd><a id="blue" title="Blue" href="#nogo">Blue</a></dd>

<dd><a id="indigo" title="Indigo" href="#nogo">Indigo</a></dd>

<dd><a id="violet" title="Violet" href="#nogo">Violet</a></dd>

</dl>

Como comenté en la entrada anterior, podéis colocar una URL en cada uno de los colores del arco-iris (href="#nogo") y dirigir la imagen a donde gustéis.