Cambiar imagen del boton por encima

JUAN CARLOS RB · #1 (**permalink**) 13/06/2009, 05:18

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.

kseso? · #2 (**permalink**) 13/06/2009, 05:42

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

Un saludo

JUAN CARLOS RB · #3 (**permalink**) 13/06/2009, 05:47

Simplemente que cuando el raton encima tenga una imagen y cuando no esté encima tenga otra.

kseso? · #4 (**permalink**) 13/06/2009, 05:51

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

JUAN CARLOS RB · #5 (**permalink**) 13/06/2009, 05:58

Mira el codigo de arriba. Hago lo que pone en estos ejemplos pero no lo hace.

David · #6 (**permalink**) 13/06/2009, 06:29

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.

kseso? · #7 (**permalink**) 13/06/2009, 06:40

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)

gioramies · #8 (**permalink**) 13/06/2009, 10:30

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á.

David · #9 (**permalink**) 13/06/2009, 20:43

Sólo mencionar que la pseudoclase hover no funcionará en todos los navegadores para el elemento input.

gioramies · #10 (**permalink**) 13/06/2009, 20:52

Cita:

Iniciado por David el Grande

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?

JUAN CARLOS RB · #11 (**permalink**) 15/06/2009, 08:55

Es lo mismo. No?

gioramies · #12 (**permalink**) 15/06/2009, 09:14

Cita:

Iniciado por David el Grande

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á.