Cambio de color al pasar raton

Pepi · #1 (**permalink**) 07/06/2002, 10:11

Perdon por hacer una consulta que supongo muy repetitiva pero he estado buscando la respuesta y no la veo. Necesito saber el atributo que se utiliza para que al pasar el rraton por encima de un link este cambie de color.
Gracias

marti · #2 (**permalink**) 07/06/2002, 10:22

el atributo es onmouseover y onmouseout

Pepi · #3 (**permalink**) 07/06/2002, 10:34

Necesito la orden completa que hay que incluir
Gracias

marti · #4 (**permalink**) 07/06/2002, 10:53

aki tienes
onmouseover="this.style.color='#000000'" onmouseout="this.style.color='#FFFFFF'"
:P

tunait · #5 (**permalink**) 07/06/2002, 11:16

La forma más sencilla es declarar el estilo en head

<style type="text/css">
a:hover{color:#00ffff;font-weight:bold}
</style>

Y el resto lo hace automático. Cambia el color por el que quieras y si no quieres que te lo ponga en negrita quita font-weight:bold

Pepi · #6 (**permalink**) 07/06/2002, 11:40

No me ha funcionado. Por favor soy muy novata
quiza necesite la indicacion completa
Gracias

tunait · #7 (**permalink**) 07/06/2002, 12:21

:) bueno paciencia que verás como al final sale.

Mira, en el código fuente tienes al principio los siguiente:

<html>
<head>
<title> El título de tu página</title>

Pues por ejemplo debajo pones lo siguiente:

<style type="text/css">
a:hover{color:#00ffff;font-weight:bold}
</style>

De forma que te quedará:

<html>
<head>
<title> El título de tu página</title>

<style type="text/css">
a:hover{color:#00ffff;font-weight:bold}
</style>

</head>
<body.......

Y yá está. Luego cuando crees un enlace automáticamente te cambiará de aspecto al pasar el raton sobre éste.

. · #8 (**permalink**) 07/06/2002, 12:55

Cita:

marti:el atributo es onmouseover y onmouseout

Estos son atributos??

Que no eran Eventos??

Pepi · #9 (**permalink**) 07/06/2002, 13:42

Hola de nuevo.
Lo he hecho y si bien cambia a negrita y se desplaza, el color permanece el mismo blanco que tiene originalmente el enlace.
Siento ser pesada pero no lo consigo Influye que haya quitado el subrayado del enlace?
Gracias

tunait · #10 (**permalink**) 07/06/2002, 13:48

Ops, has de sacarle el color al enlace!!

Si quieres que el enlace sea en blanco indicaselo también desde los estilos.

Añade un par de líneas a lo que te dije más arriba:

<style type="text/css">
a:link{color:white}
a:visited{color:white}
a:hover{color:#00ffff;font-weight:bold}
</style>

Si quieres que el enlace visitado tenga otro color que no sea el blanco se lo camibias donde dice a:visited

Suerte. :)

marti · #11 (**permalink**) 07/06/2002, 14:58

este mesaje va para . de mejico perdona por mi ignorancia pero todos no somos tan listos komo tu solo keria ayudar

. · #12 (**permalink**) 07/06/2002, 18:33

Huy que carácter marti, era una bromilla, no pense que te enojarías por cualquier cosa

:(

salvador62 · #13 (**permalink**) 07/06/2002, 18:51

para cambiar el color a rojo, pones dentro de <head> ... </head> lo siguiente:

<style>

</style>

salvador62.
<A HREF="http://www.eljuegodelapaella.org"><img src="http://www.iespana.es/nohurry/pez.gif" border=0 alt="Sin prisa"></a>

. · #14 (**permalink**) 07/06/2002, 19:08

Si lo que quieres es tener varios estilos en la misma página prueba con estos

<HTML>
<HEAD>
<TITLE>Página</TITLE>
<style>
A.click:link {text-decoration:none; color:white}
A.click:active {text-decoration:none; color:black}
A.click:visited {text-decoration:none; color:white}
A.click:hover {text-decoration:underline; color:red}

A.click2:link {text-decoration:none; color:gold}
A.click2:active {text-decoration:none; color:black}
A.click2:visited {text-decoration:none;color:red}
A.click2:hover {text-decoration:underline; color:silver}
</style>
</head>
<body bgcolor=black>

<br>
<a class=click href="http://www.pagina.com">tipo de estilo 1 </a><br>
<br>
<a class=click2 href="http://www.pagina.com">tipo de estilo 2 </a>

<br>
</body>
</html>

Estos si te servirán

marti · #15 (**permalink**) 08/06/2002, 03:38

. de mejico perdon por la contestacion k te hice tenia un dia malo y me piko un poko eso perdoname ;)

. · #16 (**permalink**) 08/06/2002, 11:32

spoexx

;)

Waga · #17 (**permalink**) 08/06/2002, 12:12

Hola muy buena funcion (de mexico) yo hago eso por los estilos de css pero nunca pense que se podia hacer asi gracias por la ayuda Saludos a todos los amigos del foro
Atte
Nairobi

Debb · #18 (**permalink**) 09/06/2002, 05:49

A ver Pepi, aunque me dedico a esto por aficion, se bastante sobre html y voy haciendo pinitos con javascript. Por eso y viendo que hay tanto lio entre expertos webmasters (sin ofender amigos, pues realmente les admiro a TODOS y cada uno de ellos), ¿por que no me dices que color quieres que tenga el enlace antes de que cambie de color y que color quieres que tenga despues? Ya te creo yo el codigo.. es muy facil.

terrariomania · #19 (**permalink**) 08/12/2005, 04:19

Lo que no entiendo es porqué ponen < , > , ...

¿¿¿ No se usan < y > ???

Si inserto el código que dió Tunait tal cual me aparece en amarillo en el web como si no lo reconociera:

<html>
<head>
<title> El título de tu página</title>

<style type="text/css">
a:hover{color:#00ffff;font-weight:bold}
</style>

Si intento cambiar los < y > por < y >, no me aparece en amarillo pero tampoco observo ninguna variación en el enlace.

No lo entiendo la verdad.

Muchas gracias por el post, buscaba saber esto hace tiempo.

JavierB · #20 (**permalink**) 08/12/2005, 04:29

Hola terrariomania

Te habrás fijado en que el mensaje inicial es muy antiguo, hace más de 3 años. Hubo un cambio en los foros y los mensajes anteriores salen así, en lugar de algunos caracteres aparece el código HTML.

Te pongo el código de tunait (¡Hola!

) "traducido":

Código PHP:

  <html>
<head>
<title>Untitled</title>
<style type="text/css">
a:hover{color:#00ffff;font-weight:bold}
</style>
</head>
<body>
<a href="algo.html">Pepe</a>
</body>
</html>

Saludos,

terrariomania · #21 (**permalink**) 08/12/2005, 07:02

Ohhh, jejee.

Mil gracias, ahora funciona perfectamente pero... si quisiera que no apareciese subrayado?? se puede arreglar?

De nuevo muchas gracias. Hacía tiempo que quería aprenderlo.

Jorolo · #22 (**permalink**) 08/12/2005, 09:09

hola a todos.

Cita:

Iniciado por terrariomania

...si quisiera que no apareciese subrayado?? se puede arreglar?

La respuesta a esa duda aquí.

terrariomania · #23 (**permalink**) 08/12/2005, 12:08

Gracias Jorolo. Dice que hay que poner:

A[href] { text-decoration: none }

Pero donde hay que poner eso? He probado a ponerlo de varias formas y ninguna me funciona.

P.D. la propiedad de texto con sombra... es útil? creo que aquí dice que algunos equipos no la soportan y desaparecen los textos. Si funcionase bien quizas sería útil para anuncios o cosas así.

Muchas gracias... creo que estoy adelantando bien hoy.

JavierB · #24 (**permalink**) 08/12/2005, 12:12

Hola terrariomania

Ponlo así:

<style type="text/css">
a {text-decoration:none}
a:hover{color:#00ffff;font-weight:bold}
</style>

El texto con sombra, que yo sepa, solo funciona en Internet Explorer, en los demás navegadores se vería sin sombreado.

Saludos,

terrariomania · #25 (**permalink**) 08/12/2005, 13:32

Muchas gracias.

Os muestro como va quedando para que veais en que pongo vuestra gran ayuda.

Si teneis cualquier crítica... llevo varios días preguntando por aquí para empezar con buen pie. por favor, decid cualquier fallo que veais sobre todo en cuanto a futuros posibles errores, código, etc.

http://personal.telefonica.terra.es/...diaz/index.htm

Este es el post donde estoy recibiendo consejos:

http://desaweb.forosdelweb.com/showthread.php?t=354953

Entrad y dejad vuestras opiniones e ideas por favor.