botones animados

[atino]

Hola en el menu que estoy creando para navegar dentro de la pagina web he creado unos botones para ir a las distintas secciones, mediante photoshop, lo que quiero es que cuando se presiones sobre el boton este cambie su forma sin presionarlo esta para afuera y presionadolo este para dentro. como lo hago? saludos y gracias

[francisco1]

Creo que con flash lo podras hacer sin problemas pero no es muy aconsejabre para la indexacion de los enlaces en los buscadores.
http://www.adobe.com/es/products/flashplayer/
Y si utilizas javascript mas o menos lo mismo, lo mejor es utilizar css.
E intentar crearlo en css y con imagenes poniendole el alt, con dos imagenes diferentes pero eso ya no se como, tendras que hacer codigos e imagenes.

[Rabs]

Lo mejor es usar CSS, con a y a:hover (alguino de los chicos ya te dice como funcionan , yo te lo explicaria, pero no tengo timepo :S)

[atino]

si pense hacerlo con imagenes pero cual es el codigo para que aparesca una y luego la otra? saludos

[Rabs]

muy facil: El link normal a {background-image: url('direccion-de-la-imagen')}
y para cuando el cursor este encima: a:hover {background-iamge: url('url-de-la-imagen')}

[atino]

Gracias Rabs, viste que al final tenias tiempo jajaj:)

[Rabs]

Pero por que lo explique por encia.. Pues eso se aplicara a TODOS LOS LINKS.

[atino]

Ok como aplico esto:

a {background-image: url('direccion-de-la-imagen')}

a:hover {background-iamge: url('url-de-la-imagen')}

directamente solo a los botones de la barra de menu. Saludos y gracias

[Yaneth]

haces un grupo de "a" solo para tus menus, puedes hacerlo asi.

asi las caracteristicas del grupo afectan solo a los enlaces que tienes dentro del div menu

#menu a:
#menu a:hover
etc etc

saludos

[atino]

Hola Yaneth, lo tengo definido como navegacion, entonces en ves de menu puse #navegacion a... pero no pasa nada, si quito la imagen del boton me aparece un rectangulo con una x y cuando paso el raton por encima, si me aparece el segundo boton.

en el HTML escribi esto:

<div id="navegacion"><ul>
<li><a href="videos/videos.html"><img src="boton-nuevo-1.png"width="180" height="50" ></a></li><li><a href="fotografia/fotografia.html"><img src="objetosdos/boton-nuevo-2.png"width="180" height="50" ></a></li><li><a href="equipo_tecnico/equipo_tecnico.html"><img src="objetosdos/boton-nuevo-3.png"width="180" height="50" ></a></li><li><a href="contacto/contacto.html"><img src="objetosdos/boton-nuevo.png"width="180" height="50" ></a></li>

y en es css esto:

#navegacion a{background-image: url(ojbetosdos/boton-nuevo-1.png)}
#navegacion a:hover {background-image: url(objetosdos/boton-31.png)}


Esta bien? o hice cualquier cosa.

Saludos y gracias compañera

[Doodleo]

Ese rectángulo con una x probablemente es porque la ruta de la imagen está mal, o no has subido la imagen

[Yaneth]

mmm

veo esto

<li><a href="videos/videos.html"><img src="boton-nuevo-1.png"width="180" height="50" ><

donde está tu boton????¡? no hay carpeta objetos??????

[atino]

si tengo una carpeta de objetos. que se llama objetosdos

[Doodleo]

Y el botón lo tienes en esa carpeta?

En ese caso, la carpeta está en el mismo directorio que el index?

[atino]

si el boton esta en esa carpeta.

lo que no entiendo es lo del mismo directorio del index?

gracias por vuestra ayuda sois unos fenomenos