Dar foco a links

[moneo]

Hola

Con Javascript crear el efecto que se consigue con focus en CSS.

Es decir, conseguir que un link tenga un estilo diferente al resto de links de un menu cuando recibe el foco o ha sido clickeado.

Saludos.

[JavierB]

Hola moneo

No se si te habré entendido bien:

Código:

<a href="algo.html" onfocus = "this.color='red'" onblur = "this.color=blue">

Saludos,

[moneo]

Efectivamente Javier B, aplicando lo que dices, el link que recibe el foco adquiere el estilo que le indicas respecto a los demas links. Pero el problema es que funciona cuando todos los links se dirigen a una misma pagina....
Si tienes el tipico menu lateral que se mantiene en todas las paginas, al pinchar sobre uno de los enlaces, este pierde el foco cuando la pagina se refresca.

En fin, me interesaria conseguir lo que sucede con este sencillo ejemplo en php con dos enlaces, pero en javascript y de forma mas efectiva.

Imaginar que en lugar de dos enlaces en el menu lateral hubiera una cantidad muy superior, el codigo seria demasiado largo para conseguir un efecto tan sencillo....

Gracias.

Código PHP:

  <? 
 
//inicio cambio de color del menu 
$url=$_SERVER['REQUEST_URI']; 
if($url=="/perros.php"){ 
$uno="color:#EC0000;font-family:verdana;font-size:11px"; 
}else{ 
$uno="color:black;font-family:verdana;font-size:11px"; 
} 
 
if($url=="/gatos.php"){ 
$dos="color:#EC0000;font-family:verdana;font-size:11px"; 
}else{ 
$dos="color:black;font-family:verdana;font-size:11px"; 
} 
//Fin cambio color menu 
?> 
 
<a href="/perros.php" style='<? echo $uno; ?>'>Perros</a> 
 
<a href="/gatos.php" style='<? echo $dos; ?>'>Gatos</a>  

[Shiryu_Libra]

por que no implementas CSS en ese menu??? para crear esos efectos que deseas

[Shiryu_Libra]

aki hay UN MENU, que cuando estas sobre los enlaces cambia de color

por si te interesa

suerte

[moneo]

No se trata de que cambie el color cuando el raton pase por encima o se clickee.

Se trata de mantener el estilo del link con respecto a los demas una vez que se haya pinchado.

Por ejemplo, como sucede en el menu lateral de esta dirección.
h t t p : // w w w . nbay . e u/
Una vez que clickeamos sobre el enlace , este mantiene el color rojo con respecto al resto de enlaces con el fin de que el usuario sepa donde se encuentra en cada momento.

Otro ejemplo:
h t t p : // news.bbc.co.uk/hi/spanish/news/default.stm


Se trata de automatizar este efecto.

No se trata de hacer paginas diferentes con el mismo menu lateral cambiando el estilo de cada enlace con css. Se trata de automatizar la tarea. Se automatiza en php con el codigo anterior. Me gustaria saber como se puede realizar con javascript de forma mas sencilla y con menos codigo.

Gracias.

[Shiryu_Libra]

bueno, por ahi hubieras empezado compañero

extracto del CSS de la primera pagina

Código:

.nlink:active {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#FF6633;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:underline;
}

.nlink:link {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#808080;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:none;
}

.nlink:visited {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#808080;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:none;
}

.nlink:hover {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#FF6633;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:underline;
}

manda llamar al CSS de esta forma

<a class="nlink" href="index-01-00.html">Auto and Trucks</a>

y como ya tenemos asignados los valores para su uso, mantendria el aspecto solo cambiaria en cada accion

eso es lo que ocupas???

[moneo]

Shiryu_Libra agradezco tu interés..

Tal como planteas tampoco se resuelve el problema.

Tambien extraje ese codigo CSS de la pagina para probar...

Código:

<style>

.nlink:active {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#FF6633;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:underline;
}

.nlink:link {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#808080;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:none;
}

.nlink:visited {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#808080;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:none;
}

.nlink:hover {
background-image:url(images/nbay.gif);
background-position:left center;
background-repeat:no-repeat;
color:#FF6633;
font-weight:bolder;
line-height:18px;
padding-left:16px;
text-decoration:underline;
}
</style>

<a class="nlink" href="1.html">uno</a>
<a class="nlink" href="2.html">dos</a>

si creas dos paginas html diferentes con el mismo codigo CSS nos encontraremos con la misma situacion.

Cuando vas de una pagina a otra, esta se refresca, por lo tanto el link que has pinchado pierde el foco y se nos presenta con el color inicial.

Cuando pinchas el link, si que cambia su color al pasar por encima y al ser clickeado, pero no lo mantiene al cambiar de pagina.

Se trata que el codigo CSS cambie en cada una de las paginas pero sin tener que crear un menu con un CSS diferente en cada una de las paginas.

El CSS puede cambiar el color, tamaño, etc... de cualquier objeto cuando pasas el raton por encima, pinchas el enlace, etc..., pero quiza estamos hablando de conseguir hacer algo que dinamicamente no es posible solo con CSS, sino que hay que combinar esta tecnologia de maquetación con otra dinamica como javascript, asp o php.


------------------------------

Quizá me este explicando yo mal.....

Tengo un menu lateral en un "include" que me vale para todas las paginas de mi web.....

Los enlaces tienen un estilo concreto creado con CSS...

Deseo que con ese unico menu que he creado para toda mi Web, y que lo llamo a traves de una funcion include, consiga darle un estilo diferente al enlace activo con respecto a los demas enlaces de mi menu.

Ejemplo:

Si estuviera navegando por la pagina de contenido:

inicio====>color gris

contenido====>color rojo(este es el enlace activo).

empresa====>color gris

contacto====>color gris



Si estuviera navegando por la pagina de contacto:

inicio====>color gris

contenido====>color gris

empresa====>color gris

contacto====>color rojo(este es el enlace activo).


Un saludo

[este8an]

necesitas en cada página configurar distinto el css.
Página 1 el link que queres se vea diferente debe llevar otro id.Por ejemplo
<a href"#" id="vinculo_que_te_trajo_a_esta_pagina">pagina1</a>
<a href"#" id="vinculo_normal">pagina2</a>

Luego en el css necesitas dos configuraciones distintas para cada link
#vinculo_que_te_trajo_a_esta_pagina{...color azul...}
#vinculo_normal{...color rosa...}

[derkenuke]

¿Se podría hacer un focus() a un elemento <A>?