cambiar a:link con javascript

[derkenuke]

Quiero cambiar el color de los links de una capa <div> una vez cargada la pagina, ¿funcionaria con cambiar el color de a:link de css? ¿Como se hace esto con javascript?

Muchas gracias.

[JavierB]

Hola, derkenuke.

Suponiendo que este sea capa: <div id="capa">

Podrías usar esta función:

Código PHP:

  function cambiarColor() {
    elem=document.getElementsByTagName('a');
    for(i=0; i<elem.length; i++)
        elem[i].style.color='green';
} 
   

Espero que te sirva. Saludos,

[derkenuke]

Mmm, eso me cambia todos los links del documento de color, y yo me refiero a los de la capa unicamente.

Aunque gracias por contestar.

[JavierB]

Perdón, perdón, perdón...

Había pensado una cosa y al final he puesto otra:

Código PHP:

  function cambiarColor() {
    elem=document.getElementById('capa');
    elem=elem.getElementsByTagName('a');
    for(i=0; i<elem.length; i++)
        elem[i].style.color='green';
} 
   

Espero que ahora si marche. Saludos,

[derkenuke]

Ok, ese si que funciona.

Muchas gracias!

[derkenuke]

Bueno, tengo otro problemilla que no se resolver. Veamos. Escribo las capas en el documento mediante javascript, mediante un bucle for(). Seran unas 10 capas. Como son de un menu, he simplificado tu codigo JavierB (con tu permiso ), ya que solo hay un link en la capa:

Código PHP:

  capaElemActual.getElementsByTagName('a')[0].style.color='#ff0000'; 
   

La cosa es que con el bucle for, se van escribiendo las capas, y se asigna a la variable capaElemActual en cada iteracion, una referencia a la capa (document.getElementById("esaCapa"), osea que capaElemActual.id para sacar su id, no guarda su id, es de tipo object).

Los eventos los asigno asi:

Código PHP:

  capaAPonerEvento.onmouseover=function() {
    //el codigo
} 
   

De manera que si pongo en ahi dentro el codigo para cambiar el color, y hago ejecutar el evento una vez cargada la pagina, la variable capaElemActual contiene la referencia de la ultima capa que se ha insertado, no la actual como deberia ser. Como resultado, pase por el elemento que pase, lo que cambia de color es el ultimo item del menu, y no el actual.


Pido ayuda, he intentado con un eval para ver si permanecia la referencia a la capa y tampoco da resultado.

[JavierB]

No he entendido bien. ¿Podrías poner el código que utilizas para crear las capas? A ver si alguien ve la forma de conseguir lo que quieres.

Saludos,

[derkenuke]

Bueno, ya me imaginaba que necesitariais el codigo para verlo bien, no lo he puesto desde un principio porque da dolor de cabeza es :-p . Bueno ahi va:

Código PHP:

  /************************************************
    COPYRIGHT DERKENUKE 2004
************************************************/
 
var opacFlash=100;
var opacInic=0;
var opacAct=50;
var opacColor="#ffff00";
 
function menu(num,cabeza,fondo,letra,width) {
    this.num=num; this.cabeza=cabeza; this.fondo=fondo; this.letra=letra; this.width=width;
    this.elementos=new Array(0);
    this.anadirElemento=function(texto,enlace,blank,title,fondo,letra) {
        this.elementos[this.elementos.length]=new item(texto,enlace,blank,title,fondo,letra);
        return this.elementos[this.elementos.length-1];
    }
    this.generar=function() {
        document.write('<p><div id="menu"'+this.num+'>');
        document.write('<table border="0" style="border:solid 1 orange; background-color:'+fondo+';color:'+letra+';border-bottom:solid 2 orange; border-right:solid 2 orange;" width="'+this.width+';">');
        document.write('<tr><th>'+cabeza+"</th></tr>");
        document.write('<tr><td><table align="center" border="0" width="'+(this.width-5)+'">');    // -5 para respetar width original
        for(a=0;a<this.elementos.length;a++) {
            document.write('<tr><td style="border:solid 1 orange;"><div id="item'+a+''+this.num+'" style="position:relative; width:'+(this.width-5)+';">'+this.elementos[a].codigo+'</div></td></tr>');
            capaElemActual=eval('item'+a+''+this.num);
            mas='<div id="sobre_'+capaElemActual.id+'" suMenu="menu'+this.num+'" style="position:absolute; background-color:'+opacColor+'; filter:alpha(opacity='+opacInic+');';
            mas+='left:0; top:0; width:'+capaElemActual.style.width+'; height:'+capaElemActual.scrollHeight+'; cursor:hand;"'
            if(this.elementos[a].title!=null) mas+=' title="'+this.elementos[a].title+'"';
            mas+=' enlace="'+this.elementos[a].enlace+'" blank="'+this.elementos[a].blank+'">&nbsp;</div>';
            capaElemActual.innerHTML+=mas;
            sobre_capaElemActual=eval("sobre_"+capaElemActual.id);
            sobre_capaElemActual.onmouseover=function() {
                capaElemActual.getElementsByTagName('a')[0].style.color='#ff0000';
                ponerOpacidad(this,opacFlash); 
                masOpacidad(this,opacAct); 
                ponerInfo(eval(this.suMenu+".elIframe"),this.title);
            }
            sobre_capaElemActual.onmouseout=function() { 
                masOpacidad(this,opacInic); 
                ponerInfo(eval(this.suMenu+".elIframe"),"Pasa sobre una opcion para ver su descripcion");
            }
            sobre_capaElemActual.onclick=function() {
                ira(this.enlace,this.blank);
            }
        }
        document.write('</table>');
        document.write('<iframe name="info_menu'+this.num+'" width="'+this.width+'" height="50" scrolling="no" align="center" frameborder="0"></iframe>');
        document.write('</td></table></div></p>');
        this.elIframe=eval("info_menu"+this.num);
        ponerInfo(this.elIframe,"Pasa sobre una opcion para ver su descripcion");
    }
}
 
function item(texto,enlace,blank,title,fondo,letra) {
    this.title=title; this.blank=blank; this.enlace=enlace;
    this.codigo='<center><a href="'+enlace+'"';
    this.codigo+='>'+texto+'</a></center>';
}
 
function ponerOpacidad(queCapa,val) { queCapa.filters.alpha.opacity=val; }
function masOpacidad(queCapa,min) {
    val=queCapa.filters.alpha.opacity;
    if(val>min) {
        ponerOpacidad(queCapa,val-7<min?min:val-7);
        setTimeout("masOpacidad("+queCapa.id+","+min+")",50);
    }
}
 
function ponerInfo(fr,info) {
    fr.document.close(); fr.document.open();
    fr.document.write('<head><link rel="stylesheet" type="text/css" href="estilo.css"></head>');
    fr.document.write('<body topmargin="0" leftmargin="0" bgcolor="black"><center>'+info+'</center></body>');
}
 
function ira(dir,blank) { if(parseInt(blank)) window.open(dir); else top.location.href=dir;  }
 
//ejemplo de menu
var cont=0;
menu1=new menu(cont,"MI MENU","#000000","ff9933",150);
menu1.anadirElemento("item 1","mi enlace1",0,"mi descripcion1");
menu1.anadirElemento("item 2","mi enlace2",0,"mi descripcion2");
menu1.anadirElemento("item 3","mi enlace3",1,"mi descripcion3");
menu1.anadirElemento("item 4","mi enlace4",1,"mi descripcion4"); 
   

[JavierB]

Hola.

He intentado probar el código pero no he podido. Debe haber algo que no he sabido hacer. Te sugiero lo siguiente:

Cambiar la línea: this.codigo+='>'+texto+'</a></center>';

Por: this.codigo+=' style="color:red">'+texto+'</a></center>';

La verdad es que no estoy seguro de que funcione, pero por probar...

Saludos,

[derkenuke]

No se, eso me cambiaria el color permanentemente. Falta la ultima linea, la que escribe el menu, seria:

Código PHP:

   menu1.generar(); 
   

Pero lo he probado y no me funciona, no se, debe faltar algo, porque cuando lo tengo en mi pagina si me funciona. Intentare cambiar los colores para que se pueda leer bien, aunque no sera lo mismo.

Un saludo y gracias por la ayuda!