Mostrar las etiquetas con un script experimental

Este script se llama M6 menu y es una de las tanta genialidades de dhteumeuleu que siempre me sorprende con sus experimentos. El código es realmente mínimo y ta vez sea eso lo que más llama la atención. El script en si mismo ocupa unas pocas líneas y se coloca antes de </head>:

<script type="text/javascript">
//<![CDATA[
// ===========================================
//                -------- M6 menu ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// updated Feb 2010 - namespaced 
// ===========================================

var M6 = function () {
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
var zoom = function (s) {
if(s!=over){
over = s;
var i = 0,o;
while (o = P[i]) {
o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
o.style.color=(i==s)?selected:color;
i++;
}
}
}
var init = function () {
P = document.getElementById("menu").getElementsByTagName("a");
var i = 0,o;
while (o = P[i]) {
if(num){
x=i+".";
if(x.length<3)x="0"+x;
o.innerHTML = x+o.innerHTML;
}
o.style.width = "100%";
o.i = i;
o.onmouseover= function() {
zoom(this.i);
}
i++;
}
zoom(0);
}
return {
init : init
}
}();
onload = function() {
M6.init();
}
//]]>
</script>

donde hay cuatro datos configurables:

• var num agrega un número de orden delante de cada enlace (poner false para eliminarlo)
• var fontSize establece el tamaño de la fuente del texto
• var color el color de los enlaces (blanco por defecto)
• var selected el color del enlace activo (naranja por defecto)

A esto, le podemos sumar dos definiciones de CSS; por ejemplo:

#menu { /* el rectángulo donde se mostrará la lista de enlaces */
height: 300px; /* la altura del rectángulo */
position: relative;
width: 400px; /* el ancho del rectángulo */
}
#menu a {  /* los enlaces */
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}

Y el código HTML sólo es un DIV con una serie de enlaces:

<div id="menu">
<a href="URL_enlace1"> enlace 1 </a>
<a href="URL_enlace2"> enlace 2 </a>
<a href="URL_enlace3"> enlace 3 </a>
.......
</div>

¿Y esto podría usarse para algo?

Sí, claro, por ejemplo, podemos aplicarlo al blog como una forma distinta de mostrar las etiquetas. Para eso basta agregar un nuevo Elemento Etiquetas o usar el que ya tenemos, establecer el tipo LIsta y desmarcar Mostrar cantidad de entradas por etiqueta. Luego, buscamos el widget que, por defecto tendrá como id Label1 y modificamos una línea del script; en lugar de:

P = document.getElementById("menu").getElementsByTagName("a");

ponemos:

P = document.getElementById("Label1").getElementsByTagName("a");

Tambien conviene reducir la fuente del texto y no mostrar el número de orden; Por último, adaptamos el CSS, por ejemplo:

#Label1 {
height: 300px;
position: relative;
width: 250px;
}
#Label1 li {
list-style-type: none;
margin: 0;
padding: 0;
}
#Label1 a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
#Label1 a:hover {
text-decoration: none;
}