Pregunta tonta: deshabilitar un link

Volrath · #1 (**permalink**) 15/08/2007, 21:40

Hola, esto kiza es una pregunta tonta, pero no consigo respuesta en google, y aki tampoco.
Kiero deshabilitar un link, o un anchor tag: <a>, es decir, que tras cierto evento, no me aparezca la "manito" al pasar sobre el link.

Intente con $('elemento').blur() (mootools) y no funciono...
Soy nuevo con javascript, asi que disculpen si la pregunta es de lo mas obvia. Gracias!

derkenuke · #2 (**permalink**) 16/08/2007, 18:14

Hola Volrath:

Como hacer que los enlaces no se vean como enlaces me ha resultado un poco dificil, lo que he intentado hacer en este script es sustituirlos por etiquetas <span> que guardan su href (se podría hacer con cualquier otra etiqueta, y guardando cualquier atributo suyo).

Es muy simple, no me he parado a pensar en imágenes ni en maquetaciones complejas con CSS.

Código PHP:

  <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">
</style>
</head>

<body>



<p>
    Hola 
    <a href="http://www.google.es">esto es Google</a> y 
    <a href="http://www.forosdelweb.com">esto es fdw</a>, adem&#225;s, 
    <a href="http://www.forosdelweb.com/forumdisplay.php?f=13">este es su foro javascript</a>.
</p>

<p>
    <button type="button" onclick="deshabilitarLinks()">Deshabilitar enlaces</button>
    <button type="button" onclick="habilitarLinks()">Habilitar enlaces</button>
</p>


<script type="text/javascript">

function deshabilitarLinks() {
    var enlaces = document.getElementsByTagName("A");
    for(var i=0; i<enlaces.length; ) {
        var nuevoSPAN = document.createElement("SPAN");
        nuevoSPAN.setAttribute("name", "enlaceEliminado");
        nuevoSPAN.name = "enlaceEliminado";
        // ATRIBUTOS - guardamos todos los atributos del enlace que nos interesen
        nuevoSPAN.setAttribute("href", enlaces[i].getAttribute("href") );
        // CONTENIDO - el span tendrá el mismo contenido que el enlace
        nuevoSPAN.innerHTML = enlaces[i].innerHTML;
        // SUSTITUIMOS - el enlace con el span nuevo
        enlaces[i].parentNode.replaceChild(nuevoSPAN, enlaces[i] );
    }
}
function habilitarLinks() {
    var enlacesEliminados = document.getElementsByTagName("SPAN");
    for(var i=0; i<enlacesEliminados.length; i++) {
        if( enlacesEliminados[i].getAttribute("name") == "enlaceEliminado") {
            var nuevoA = document.createElement("A");
            // ATRIBUTOS - restauramos todos los atributos del enlace que nos interesen
            nuevoA.setAttribute("href", enlacesEliminados[i].getAttribute("href") );
            // CONTENIDO - el span tendrá el mismo contenido que el enlace
            nuevoA.innerHTML = enlacesEliminados[i].innerHTML;
            // SUSTITUIMOS - el span con el enlace original
            enlacesEliminados[i].parentNode.replaceChild(nuevoA, enlacesEliminados[i]);
            i--;
        }
    }
}

</script>

</body>
</html>

Hay otra opción, que es aplicándole estilos al enlace para dejarlo igualito que el texto, irreconocible. Luego ponemos en su evento onclick = new Function("return false"); y no hará nada al hacer click. Pero esa opción depende ya de tu página en sí.

Luego está la opción de ocultar y mostrar el SPAN que sustituye al link. Los crearíamos todos en el onload de la página:

Código PHP:

  <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>P&#225;gina nueva</title>
<style type="text/css">
</style>
</head>

<body>



<p>
    Hola 
    <a href="http://www.google.es">esto es Google</a> y 
    <a href="http://www.forosdelweb.com">esto es fdw</a>, adem&#225;s, 
    <a href="http://www.forosdelweb.com/forumdisplay.php?f=13">este es su foro javascript</a>.
</p>

<p>
    <button type="button" onclick="deshabilitarLinks()">Deshabilitar enlaces</button>
    <button type="button" onclick="habilitarLinks()">Habilitar enlaces</button>
</p>


<script type="text/javascript">

function e(q,noBr) {
    document.body.appendChild( document.createTextNode(q) );
    if(!noBr) document.body.appendChild( document.createElement("BR") );
}


window.onload = function() {
    var enlaces = document.getElementsByTagName("A");
    for(var i=0; i<enlaces.length; i++ ) {
        var nuevoSPAN = document.createElement("SPAN");
        nuevoSPAN.style.display = "none";
        // CONTENIDO - el span tendrá el mismo contenido que el enlace
        nuevoSPAN.innerHTML = enlaces[i].innerHTML;
        // SUSTITUIMOS - el enlace con el span nuevo
        enlaces[i].parentNode.insertBefore( nuevoSPAN, enlaces[i] );
    }
}

function deshabilitarLinks() {
    var enlaces = document.getElementsByTagName("A");
    for(var i=0; i<enlaces.length; i++ ) {
        enlaces[i].style.display = "none";
        enlaces[i].previousSibling.style.display = "";
    }
}

function habilitarLinks() {
    var enlaces = document.getElementsByTagName("A");
    for(var i=0; i<enlaces.length; i++ ) {
        enlaces[i].style.display = "";
        enlaces[i].previousSibling.style.display = "none";
    }
}

</script>

</body>
</html>

Quizás sea esta la manera que menos quebraderos de cabeza te cree, teniendo en cuenta que tendrás atributos target, id, y más dentro de las etiquetas <a>.

Un saludo y espero que te sirva.