P: ¿Como puedo hacer que los links de mi menu cambien de color cuando se les pase el puntero por encima?
R: Estas funciones logran que cuando se pase el puntero por encima de los links cambien de color, cuando se hace un click sobre uno cambie a un tercer color solo por un momento para resaltar el click y que el ultimo que ah sido clickeado quede como "activo" (el color queda fijado sobre el) hasta que se haga click en otro y el otro quede como "activo", ademas si hay uno "activo" y se pasa el puntero sobre otro link pasa a estar como "inactivo" mientras se mantenga el puntero sobre otro link, si no se hace click sobre ningun otro vuelve a estar "activo" una vez que el puntero no esta sobre ningun otro link.
Head:
Código:
function configurarcolor(colorcambio,colorclick,inicial){
if(inicial == "no"){
nombrem = "";
}else{
nombrem = inicial;
}
coloran = "";
colorca = colorcambio;
colorc = colorclick;
}
function cambiarcolor(nombre, mantener){
font = document.getElementById(nombre);
if(nombre != nombrem){
if(coloran == ""){
coloran = font.style.color;
}
if(mantener != "mantener"){
if(nombrem == ""){
if(font.style.color == coloran){
font.style.color = colorca;
}else{
font.style.color = coloran;
}
}else{
fontm = document.getElementById(nombrem);
if(font.style.color == coloran){
fontm.style.color = coloran;
font.style.color = colorca;
}else{
fontm.style.color = colorca;
font.style.color = coloran;
}
}
}else{
nombrem = nombre;
}
}else{
fontm = document.getElementById(nombrem);
fontm.style.color = colorca;
}
}
function colorclick(nombre){
font = document.getElementById(nombre);
if(font.style.color == colorca){
font.style.color = colorc;
}else{
font.style.color = colorca;
}
}
es el color que van a tener los links cuando se pasa el puntero sobre ellos,
colorenclick es el color "momentaneo" que tienen cuando se les hace click y
idlink es opcional, sirve para tener uno como "activo" cuando se carga la pagina.
Código:
<body onLoad='configurarcolor("colordecambio","colorenclick","idlink");'>
Los links deben llevar el color de "desactivado" en style="color:#color", si se eligio un link para que aparezca como activo se debe usar en el link que se eligio el "colordecambio" que se declaro en body.
Código:
<a id="ejemplo" style="color:#FFFFFF;" onMouseOver="cambiarcolor('ejemplo');" onMouseOut="cambiarcolor('ejemplo');" onClick="cambiarcolor('ejemplo','mantener');" onMouseDown="colorclick('ejemplo');" onMouseUp="colorclick('ejemplo');" href="ejemplo.html">Ejemplo</a>
Para sacar el Pre-Formato que tienen los links se puede usar esto, debe ir en head:
Código:
<style type="text/css">
A{
text-decoration: none;
}
</style>
Espero que sea de utilidad, si tienen algun comentario o pueden mejorar el codigo haganmelo saber.Suerte.
Berto.