Cambiar color de texto con evento onMouseOver

pekychery · #1 (**permalink**) 14/10/2009, 05:07

Hola.
Ante todo muchas gracias por la ayuda que se recibe.

Mi problema es que quiero crear una barra de menú que realice las siguientes tareas.

Por ejemplo barra de menú con 2 opciones opción 1 y opción 2.

quiero que al clicar en una opción su texto cambie de color. Hasta ahi todo bien con el siguiente código.

<script type="text/javascript">
function CambiaColor(esto)
{
esto.style.color="blue";

}
</script>
</head>
<body>
<a onMouseOver="CambiaColor(this)">opción 1</a>
</body
></html>

El problema lo tengo cuando añado la opción 2 por que quiero que al pasar por la encima de uno de ellos, el anterior vuelva a tener el color inicial.

<script type="text/javascript">
function CambiaColor(esto)
{
esto.style.color="blue";

}
</script>
</head>
<body>
<a onMouseOver="CambiaColor(this)">opción 1</a>
<a onMouseOver="CambiaColor(this)">opción 2</a>
</body
></html>

Se que el problema esta en la llamada "CambiaColor(this)" a la función pero no se como arreglar para que al ponerme encima de, por ejemplo, la opción 1, la opción 2 vuelva a tener el color original (por ejemplo black).

Un saludo y gracias de antemano.

kseso? · #2 (**permalink**) 14/10/2009, 06:43

Hola PeKichery.
Bienvenido a FdW
¿Obligatorio usar js? --> hay un foro específico para ese lenguaje.
¿No es obligatorio utilizar js? --> hay un lenguaje que se llama css y tenemos un foro para ello:

Código css:

Ver originala {color: #000;}
a:hover {color: #c00;}

Un saludo

pzin · #3 (**permalink**) 14/10/2009, 06:47

Sin ánimo de parecer un loro, como bien dice kseso?, con CSS puedes lograr eso que buscas y ahorrarte todas esas lineas de código.

No obstante, si por alguna razón tienes que hacerlo con javascript (que en principio no es recomendable) y obviando mi poco conocimiento de javavascript, puedes crear una función que cambie el color a black, y ponerlo en onMouseOut.

loncho_rojas · #4 (**permalink**) 14/10/2009, 07:04

CSS (2)- Pseudo-clases a

pekychery · #5 (**permalink**) 14/10/2009, 07:32

Gracias a todos.

Antes de nada decir que estoy empezando en esto de la programacion web.

E conseguido algo de esta forma (por si a alguien le es útil) pero no consigo volverlos al color original. No es necesario js.

<script type="text/javascript">
function CambiaColor(texto,colo)
{

texto.style.color=colo;

}
</script>
</head>
<body>
<a id="texto1" onMouseOver="CambiaColor(document.getElementById(' texto2')">opción 1</a>
<a id="texto2" onMouseOver="CambiaColor(document.getElementById(' texto1'))">opción 2</a>
</body
></html>

pekychery · #6 (**permalink**) 14/10/2009, 07:34

Perdon el codigo tiene un error en la funcion.

<script type="text/javascript">
function CambiaColor(texto)
{

texto.style.color="blue";

}
</script>
</head>
<body>
<a id="texto1" onMouseOver="CambiaColor(document.getElementById(' texto2')">opción 1</a>
<a id="texto2" onMouseOver="CambiaColor(document.getElementById(' texto1'))">opción 2</a>
</body
></html>

alexk · #7 (**permalink**) 14/10/2009, 08:41

Cita:

No es necesario js

Código:

<script type="text/javascript">
function CambiaColor(texto)
{

texto.style.color="blue";

}
</script>
</head>
<body>
<a id="texto1" onMouseOver="CambiaColor(document.getElementById(' texto2')">opción 1</a>
<a id="texto2" onMouseOver="CambiaColor(document.getElementById(' texto1'))">opción 2</a>
</body
></html>

no soy bueno en matematicas ni en JS... pero por que no ves el mensaje de

kseso? #2

pekychery · #8 (**permalink**) 15/10/2009, 10:28

el mensaje de kseso? ya lo he visto sr alexk pero no es lo que estoy buscando. Si lees el primer mensaje puedes ver que lo que quiero es que al pasar por encima de un texto cambie de color y lo mantenga hasta que el ratón se situe en otro texto y no al salir de encima del texto. He conseguido un efecto que se acerca al final por si a alguien le es útil pero ahora me falta que vuelvan al color original.

<script type="text/javascript" language="javascript">
function CambiaColor(etiqueta)
{
if (etiqueta.style.color=="blue"){
etiqueta.style.color="black";
}
else{
if (etiqueta.style.color=="black"){
etiqueta.style.color="blue";
}
}
}
</script>
</head>
<body>
<a id="texto1" style="color:black" onMouseOver="CambiaColor(this)">opción 1</a>
<a id="texto2" style="color:black" onMouseOver="CambiaColor(this)">opción 2</a>
<a id="texto3" style="color:black" onMouseOver="CambiaColor(this)">opción 3</a>

Gracias a todos.

pekychery · #9 (**permalink**) 15/10/2009, 10:53

Ya tengo la solucion al problema.

Gracias a todos.

Os la dejo por si a alguien le hace falta.

<script type="text/javascript" language="javascript">

function CambiaColor(etiqueta)
{
for (x=1;x<4;x++){
document.getElementById('texto'+x).style.color="bl ack"
}
if (etiqueta.style.color=="blue"){
etiqueta.style.color="black";
}
else{
if (etiqueta.style.color=="black"){
etiqueta.style.color="blue";
}
}
}
</script>

MarioAraque · #10 (**permalink**) 15/10/2009, 11:01

Osea lo que vos queres es que cuando pases por una opcion, la otra vuelva a su color original? Por que no usas mejor el evento onmouse out de la etiqueta?
Aunque lo mejor es usar Css, como dijeron en el post numero 2.

Saludos.

alexk · #11 (**permalink**) 15/10/2009, 11:15

eso es JS... si preguntas en CSS que no te sorprenda recibir soluciones en CSS...

Código javascript:

Ver originalfunction CambiaColor(etiqueta)
{
    for(i=1;i<=3;i++){
    id = document.getElementById('texto'+i);
        if(i!=etiqueta){
        id.style.color="black";
        }
        else{
        id.style.color="blue";
        }
    }
}

Código html:

Ver original<a id="texto1" onMouseOver="CambiaColor(1)">opción 1</a>
<a id="texto2" onMouseOver="CambiaColor(2)">opción 2</a>
<a id="texto3" onMouseOver="CambiaColor(3)">opción 3</a>

chao y suerte

EDITO: ups no habia visto que lo solucionaste que bueno chao!.... XD

jomaruro · #12 (**permalink**) 15/10/2009, 15:27

Hola:

Cita:

Iniciado por alexk

si preguntas en CSS que no te sorprenda recibir soluciones en CSS

Pero pregunta en (X)HTML. ¡¡Despistado!!

pekychery ¿Te has preguntado que pasaría si un usuario tuviera desactivado el Javascript en su navegador?

Saludos.

alexk · #13 (**permalink**) 15/10/2009, 15:46

Cita:

Iniciado por jomaruro

Hola:

Pero pregunta en (X)HTML. ¡¡Despistado!!

jajaja es verda...

es la costumbre pocas veces me paso por estos lares jaja...!!!