Foros del Web » Creando para Internet » CSS »

Cambiar imagen del boton por encima

Estas en el tema de Cambiar imagen del boton por encima en el foro de CSS en Foros del Web. Mirar el codigo que me dicen que haga para que realice dicha funcion: .btnnuevainci { padding: 0; margin: 0; border: 1; /*no quiero borde*/ background-image:url(../Imagenes/btn.gif); ...
  #1 (permalink)  
Antiguo 13/06/2009, 06:18
 
Fecha de Ingreso: noviembre-2004
Mensajes: 223
Antigüedad: 13 años, 1 mes
Puntos: 0
Cambiar imagen del boton por encima

Mirar el codigo que me dicen que haga para que realice dicha funcion:


.btnnuevainci
{ padding: 0;
margin: 0;
border: 1; /*no quiero borde*/
background-image:url(../Imagenes/btn.gif);
width: 120px;
height: 50pxcm;
cursor: pointer; /*muestrame el cursor de mano*/
font:Georgia, "Times New Roman", Times, serif;
/*text-indent: -999px; manda el texto leeeeejos*/
/*overflow: hidden; /*esconde cualquier trazo del mismo*/
color: #FFFFCC;
}
.btnnuevainci a
{
color: #666666;
text-decoration: none;
display: block;
width: 100%;
background-image:url(../Imagenes/btn.gif);
}

.btnnuevainci a:hover
{
background-image:url(../Imagenes/btn2.gif);
color: #ffffcc;

}


Ok? Ahora en el boton le pongo:

<input type="button" name="btnnuevainci" id="btnnuevainci" class="btnnuevainci" value="Nueva Incidencia" onClick="location.href='NuevaInciadmin.php'" />

El problema es que no hace nada.
  #2 (permalink)  
Antiguo 13/06/2009, 06:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar imagen del boton por encima

Hola Juan Carlos:
¿Y qué es lo que quieres hacer?
Supongo tus intenciones, pero mejor ayuda recibirás si las comentas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 13/06/2009, 06:47
 
Fecha de Ingreso: noviembre-2004
Mensajes: 223
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Cambiar imagen del boton por encima

Simplemente que cuando el raton encima tenga una imagen y cuando no esté encima tenga otra.
  #4 (permalink)  
Antiguo 13/06/2009, 06:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar imagen del boton por encima

o.k. Juan Carlos.

Mira la página de Mikmoro www.araudi.net entre los rollovers tienes algunos ejemplos de ese efecto, sólo con css.
Y algo un poquito más juguetón (lúdico y exagerado) aquí

Son muy sencillos de implementar (sólo són un par de propiedades css), pero si te topas con alguna dificultad, por aquí andaremos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 13/06/2009, 06:58
 
Fecha de Ingreso: noviembre-2004
Mensajes: 223
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Cambiar imagen del boton por encima

Mira el codigo de arriba. Hago lo que pone en estos ejemplos pero no lo hace.
  #6 (permalink)  
Antiguo 13/06/2009, 07:29
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Cambiar imagen del boton por encima

No, si te fijas tu selector afectaría a un enlace (a) que se encontrara dentro del botón (); revisa detenidamente el ejemplo que está en la página. Usa un enlace directamente en lugar de usar un botón y redireccionar con Javascript.

Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #7 (permalink)  
Antiguo 13/06/2009, 07:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar imagen del boton por encima

En un vistazo rápido, creo que podría ser por el código del contenedor del enlace:
Cita:
.btnnuevainci
{ padding: 0;
margin: 0;
border: 0; /*no quiero borde*/
background-image:url(../Imagenes/btn.gif);/*no necesario, ya lo aplicas al enlace "button"*/
width: 120px;/*mejor al propio enlace y que su contenedor crezca con él*/
height: 50pxcm;/*mejor al propio "button" y que su contenedor crezca con él y tienes pxcm que es un despiste pero te lo anula*/
cursor: pointer; /*muestrame el cursor de mano*//*mejor al propio "button"*/
font:Georgia, "Times New Roman", Times, serif;
/*text-indent: -999px; manda el texto leeeeejos*/
/*overflow: hidden; /*esconde cualquier trazo del mismo*/
color: #FFFFCC;
}
cambia ".btnnuevainci a" y ".btnnuevainci a:hover" por ".btnnuevainci button" y ".btnnuevainci button:hover"

Creo que debería bastar. Ya dirás.

Un saludo

EDITO: upsss! Creo que me comí la respuesta de David (tardé demasiado en publicar)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 13/06/2009 a las 11:35
  #8 (permalink)  
Antiguo 13/06/2009, 11:30
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: Cambiar imagen del boton por encima

Hola y saludos a todos. Creo que realmente debe ser de esta forma:

Código:
.btnnuevainci {
padding: 0; margin: 0; border: 1; /*no quiero borde*/ width: 120px; height: 50px; font-family: "Georgia", "Times New Roman", "Times", "Serif"; color: #666666; text-decoration: none; display: block; background-image:url(../Imagenes/btn.gif);
} .btnnuevainci:hover {
background-image:url(../Imagenes/btn2.gif); color: #ffffcc;
}

Lo que sucede es que con .btnnuevainci te refieres al input, si le agregas el a, te refieres a una etiqueta a que esta dentro del input con la clase .btnnuevainci, el cual no existe (y jamás existirá, porque no se puede colocar un enlace dentro de un input).

Primero le colocas al input el estilo que tienes en el código .btnnuevainci {...} y cuando el mouse pase por encima de él, lo haces con el código .btnnuevainci:hover {...}

Espero poder haberte ayudado. Seguro así funcionará.
  #9 (permalink)  
Antiguo 13/06/2009, 21:43
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Cambiar imagen del boton por encima

Sólo mencionar que la pseudoclase hover no funcionará en todos los navegadores para el elemento input.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 13/06/2009, 21:52
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: Cambiar imagen del boton por encima

Cita:
Iniciado por David el Grande Ver Mensaje
Sólo mencionar que la pseudoclase hover no funcionará en todos los navegadores para el elemento input.
Es cierto, porque mejor no usas algo como:

Código HTML:
<a id="btnnuevainci" class="btnnuevainci" onClick="location.href='NuevaInciadmin.php'" >Nueva Incidencia</a> 
, en vez de:

Código HTML:
<input type="button" name="btnnuevainci" id="btnnuevainci" class="btnnuevainci" value="Nueva Incidencia" onClick="location.href='NuevaInciadmin.php'" /> 
Y tengo una pregunta, ¿para qué colocas: onClick="location.href='NuevaInciadmin.php'" ? ¿no podrías colocar algo como href="NuevaInciadmin.php" en un enlace?
  #11 (permalink)  
Antiguo 15/06/2009, 09:55
 
Fecha de Ingreso: noviembre-2004
Mensajes: 223
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Cambiar imagen del boton por encima

Es lo mismo. No?
  #12 (permalink)  
Antiguo 15/06/2009, 10:14
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: Cambiar imagen del boton por encima

Cita:
Iniciado por David el Grande Ver Mensaje
Sólo mencionar que la pseudoclase hover no funcionará en todos los navegadores para el elemento input.
No es los mismo, puesto que como dice David el Grande, el hover no te funcionará en todos los navegadores (cosillas de IE) cuando lo utilizas en un input, pero si lo haces en un enlace si te funcionará.
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 16:02.