Foros del Web » Creando para Internet » CSS »

Imágenes-botón con sustitución en CSS

Estas en el tema de Imágenes-botón con sustitución en CSS en el foro de CSS en Foros del Web. Hola: Estoy haciendo una web que incorporará unas imágenes como botones, sin olvidar otros enlaces inferiores de hipertexto. Para que sepáis de que se trata, ...
  #1 (permalink)  
Antiguo 20/08/2006, 04:33
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 5 meses
Puntos: 8
Imágenes-botón con sustitución en CSS

Hola:

Estoy haciendo una web que incorporará unas imágenes como botones, sin olvidar otros enlaces inferiores de hipertexto.

Para que sepáis de que se trata, os diré que quiero incluir una fuente de letra que viene a ser el estilo general de la página desde siempre (estoy en fase de reconversión).

Es la fuente es BankGothic Md BT.

No se trata más que de seguir con el estilo presentado hasta ahora por la web, incluído en logotipos, textos de presentación, etc.

Como es una fuente que no está presente en muchos ordenadores, no se vería si simplemente la establezco en código. Así que voy a hacer botones de imágen nada más que para poder exponerla.

Son botones sencillos, con el título centrado y un borde. Las letras serían en negro y el borde también, y, al pasar el ratón, tanto letras como borde tornarían a blanco.

Quiero conseguirlo como hasta ahora, con dos imágenes que se sustituyen, pero sin JS, que no me gusta y tiene los inconvenientes que sabemos.

Sé que es un problema más que sencillo, pero soy nuevo en CSS y prefiero pisar sobre seguro.

¿Me podríais mostrar un ejemplo cualquier de imágenes de sustitución como el que os he dicho? Tanto de imágines-botón en vertical como en horizontal.

Gracias por vuestra inestimable ayuda.
  #2 (permalink)  
Antiguo 20/08/2006, 06:41
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
no es algo que se suela hacer con css, pero te propongo 2 alternativas:
1.- que lo pongas como imagen de fondo con background-image, y luego cambies la imagen de fondo en :hover (es decir, cuando el ratón pasa por encima)
2.- que hagas una imagen en la que el borde y ls letras sean transparentes, y entonces otra vez en :hover, cambiás el color de fondo, con lo que se cambiaría el color visible para el borde y las letras.

Un ejemplo para aclarar:

img.clase {
background-image : url(imagen1.png);
}
img.clase:hover {
background-image : url(imagen2.png);
}

o, para el segundo caso:
img.clase {
background-color : black;
}

img.clase:hover {
background-color : green;
}


Saludos.
  #3 (permalink)  
Antiguo 20/08/2006, 07:18
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 5 meses
Puntos: 8
¿Por qué no es algo que se suela hacer en CSS?

Hola y gracias por tu contestación:

Como el título, ¿Por qué no es algo que se suela hacer en CSS? ¿Qué inconveniente ves?
  #4 (permalink)  
Antiguo 20/08/2006, 08:24
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Cita:
Iniciado por JUMASOL Ver Mensaje
Hola y gracias por tu contestación:

Como el título, ¿Por qué no es algo que se suela hacer en CSS? ¿Qué inconveniente ves?
Simplemente no se hace porque las pseudo-clases (o como se llamen) :hove, :visit; etc... en explorer solo funcionan con enlaces (etiquetas a)... si no estoy equivocado o hayan cambiado... (si no estoy en lo cierto, agradecería que me lo dijeran)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:15.