Lo has clavao Javier!
Bueno, ya lo tenemos en las faq.
FAQ#227 (cuántos hay ya no? Parece una biblioteca mas que un FAQ xD).
Pongo el codigo final tambien aqui:
Código PHP:
<html>
<head>
<style>
.corchetes {
color: #f93;
font-weight:bold;
width:3px;
visibility:hidden;
display:inline;
}
</style>
</head>
<body>
<a href="a.htm">enlace</a> texto texto texto
<a href="s.html">otro enlace</a> mas texto
<a href="i.htm">y otro</a> y se acaba aqui.
<script>
// necesitaba dos funciones, el insertBefore que ya existe, y el insertAfter que nos lo sacamos de la manga
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
// la coleccion de <a> (anchors)
var As=document.getElementsByTagName("A");
var corchete1,corchete2;
//por cada enlace
for(var a=0;a<As.length;a++) {
//quitamos los espacios anteriores y posteriores a los enlaces, que si no con el corchete oculto parecera doble espaciado
var anterior = As[a].previousSibling;
if(anterior!=null) {
anterior.nodeValue = anterior.nodeValue.substr(0,anterior.nodeValue.length-1);
}
var siguiente = As[a].nextSibling;
if(siguiente!=null) {
siguiente.nodeValue = siguiente.nodeValue.substr(1);
}
//creamos los corchetes, y les aplicamos el estilo "corchetes"
corchete1=document.createElement("DIV");
corchete2=document.createElement("DIV");
corchete1.appendChild( document.createTextNode("[") );
corchete2.appendChild( document.createTextNode("]") );
corchete1.className=corchete2.className="corchetes";
//insertamos los corchetes antes y despues del enlace
As[a].parentNode.insertBefore( corchete1 , As[a] );
insertAfter( As[a].parentNode, corchete2, As[a] );
//los eventos que se ocuparan de poner los enlaces y quitarlos
As[a].onmouseover=function() {
this.previousSibling.style.visibility="visible";
this.nextSibling.style.visibility="visible";
}
As[a].onmouseout=function() {
this.previousSibling.style.visibility="hidden";
this.nextSibling.style.visibility="hidden";
}
}
</script>
</body>
</html>