Ayuda en una web

balmunG_ #1 Jul '06

Mi tío me ha pedido que le haga una web para su negocio y me he puesto manos a la obra. He optado por hacer una web muy simple en aspecto y que a la vez sea clara y concisa. La web serà completamente en html.

Abro esto para pedir un pelin de ayuda, a ver si alguien está dispuesto a ofrecermela ;d Vereis, para los menús me gustaria que hubiese los iconos, y al pasar por encima el ratón activar un gif (que cambie el color de las letras, por ejemplo), que se mantenga del segundo color mientras el usuario tenga el ratón encima y que, cúando este se desplace fuera de la imagen, vuelva otra vez al primer color (con otro gif que ya tengo hecho).

He probado de hacerlo mediante css, pero decir que no tengo mucha experiencia no conocimientos sobre ello, y lo que he encontrado en google no me ha servido de nada.

Pues eso, espero que me podais ayudar lo más pronto posible. Gracias!

Saludos.

VipeR_CS #2 Jul '06 Administrador

Con css:

a:link {color:#aquícolordeloslinkpordefecto;}
a:hover {color:#aquícolordeloslinksalpasarelratón;}

balmunG_ #3 Jul '06

Lo que me gustaria es inicar un gif al pasar el ratón per encima, y este gif cambiaria el color. Si puedes dime más concretamente que debo poner, esque llevo con comandos de ese estilo toda la mañana y no hay manera de que me funcione.

Saludos y gracias.

KoRMuZ #4 Jul '06

Si la haces con dreamweaver creo que habia una opcion en insertar que era imagen de sustitucion, usa eso a ver si asi te funciona

VipeR_CS #5 Jul '06 Administrador

No te recomiendo con un gif, para eso supongo que tendrías que usar javascript y sería más lioso. Lo que se hace es hacer 2 imágenes, una para el link en estado de "reposo" y otra para cuando el ratón está encima. Para que cambie la imagen pues sería lo mismo que puse arriba, pero en vez de cambiar la propiedad color, cambias la propiedad background-image. Ej:

a:link {background-image:url ("imagen.jpg");}
a:hover {background-image:url ("imagen2.jpg");}

Pero ojo porque esto cambiará todos los links del documento. Para aplicarlo sólo a cierto/s botón/es tendrías que meter ese código en clases y aplicarlo en el html con el atributo class="" al botón que quieras.

balmunG_ #6 Jul '06

vale ya me ha quedado claro, gracias lo de #4 ya lo habia probado sin éxito

Al final lo he hecho de un modo distinto, también con css. En lugar de dos imágenes hago una con el doble de altura de lo necesario, en la mitad superior pongo lo que deberia salir cuando está en reposo y en la mitad inferior pongo lo que tiene que salir cuándo está el ratón encima. en a:hover le doy la instrucción de que mueva la imagen Xpíxeles (de forma que la mitad inferior quede ajustada en la tabla) para arriba y parece que cambie de imágen.

Saludos y gracias otra vez.

Usuarios habituales