css en botones

vassk7 · #1 (**permalink**) 21/12/2002, 12:12

hola:
tengo el siguiente problema...
tengo unas paginas con una hoja de estilo css, y tengo en el estilo espeficadas todas las etiquetas INPUT de la forma:

INPUT: {
propiedad: valor;

}

el problema es q tengo que hacer que los botones tengan algo especial, que al situarse sobre ellos cambie el cursor (cursor: hand)...

Alguien sabe como hacer para ocupar la misma hoja de estilo sin necesidad de crear una clase aparte, la idea es dejar las paginas tal cual, no modificarlas...

De antemano, gracias...

JavierB · #2 (**permalink**) 21/12/2002, 12:32

Hola, vassk7.

Yo creo que lo mejor es que pongas todos tus estilos en un archivo aparte llamado, por ejemplo, hoja_de_estilo.css, y que luego en cada página pongas entre <head> y </head> esto:

<LINK REL="stylesheet" HREF="hoja_de_estilo.css" TYPE="text/css">

De esta forma cuando quieras modificar algo de los estilos, cambias el archivo .css y todas las páginas reflejarán los cambios sin que tengas que tocarlas para nada.

Espero que esto aclare tu duda. Saludos,

Kunael · #3 (**permalink**) 21/12/2002, 12:56

Hola:

Bueno, ante todo debemos considerar un aspecto

Cita:

sin necesidad de crear una clase aparte, la idea es dejar las paginas tal cual, no modificarlas...

A mi humilde entender, si quieres crear un efecto en el cursor, tendrás que modificar a la fuerza el cíodigo, ya que los efectos no salen de la nada ¿no? Luego entonces se trata de que la modificación sea mínima y poco costosa.

Lo que te ha comentado JavierB sería quizá una opción costosa a corto plazo pero muy muy beneficiosa a medio y largo plazo. De hecho, si tuvieras todos los estilos agrupados en un fichero CSS exterior, tan sólo creando poquísimo código, se te modificarían todos los INPUTS del site.

Respecto a la modificación del aspecto de los cursores, mírate esta referencia: http://www.echoecho.com/csscursors.htm. Fíjate que sólo IE 4+ o Nescape Navigator 6+ implementan este efecto. Tenlo en cuenta también.

Espero haber sido de ayuda. Salu2

pako · #4 (**permalink**) 22/12/2002, 04:58

Fijate en la beta de mis foros y me dices si quieres algo asi.
A solo funcina con IE5.5 o superior Nescape Navigator 6+ y creo que con la ultima verción de opera.
Verifica todos los INPUT del sitioSITIO
De hecho le puedo cambiar el cursor casi a todo.

pako · #5 (**permalink**) 22/12/2002, 05:05

A se me olvidava si quieres un cursor para XP o win9x 2k etc... del color forma o diseño 3d que quieras; Te lo diseño.
Tambien iconos.

vassk7 · #6 (**permalink**) 26/12/2002, 08:11

Muchas gracias por sus aportes !!
ahora bien, tengo que aclarar que efectivamente los estilos los tengo en un archivo .css

y es en el archivos donde he tratado de introducir algo para que los botones tengan el cursor distinto...
como les mensione antes, tengo la etiqueta input con un estilo, pero necesito que solo los botones tengan el cursor 'hand' cuando me situe sobre ellos. El problema radica principalmente en saber que instruccion me permite referirme a los botones en la etiqueta INPUT...
he tratado lo siguiente (todo lo anterior en el archivo .css)

input[type:button] {
cursor: hand;
}

input, select, textarea {
background-color : #F0FFFF;
color: Navy;
border-bottom : 1px solid #5885F3;
border-left : 1px solid #5885F3;
border-right : 1px solid #5885F3;
border-top : 1px solid #5885F3;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10px;
}

pero no me funciona...

Se me olvidaba ...
Excelente foro pako !!!

Saludos y gracias por los aportes...
C ya.

pako · #7 (**permalink**) 26/12/2002, 18:00

Guarda lo siguiente como html y estudialo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cambia cursor</title>
<style type="text/css">

</style>
</head>
<body>
<table><tr><td><font face="Arial" size="3">
<form name="formulario" action="destino.php" method="post"onsubmit="return comprueba()">
Checkbox<input class="checkbox" type="checkbox" name="radio"><br>
Radio<input class="radio" type="radio" name="radio"><br>
Texto<input class="texto" type="text" name="texto" maxlength="12"><br>
Boton<input class="button"type="submit" value="confirmar"><br>
</form></td></tr></font></table>
<pre>
<b>Tipos de cursores</b>
cursor: auto (utiliza un cursor dado por el usuario)
cursor: crosshair (el cursor se convierte en una cruz)
cursor: default (el cursor permanece como es siempre)
cursor: e-resize (una flecha que apunta a la derecha)
cursor: hand (la tradicional mano)
cursor: help (el signo de pregunta)
cursor: move (una cruz con flechas en los extremos)
cursor: n-resize (una flecha apuntando hacia arriba o hacia el norte)
cursor: ne-resize (una flecha apuntando hacia el noreste)
cursor: nw-resize (una flecha que apunta hacia el noroeste)
cursor: pointer (nuevamente el puntero)
cursor: s-resize (una flecha que apunta hacia abajo o al sur)
cursor: se-resize (una flecha que apunta hacia el sudeste)
cursor: sw-resize (una flecha que apunta hacia el sudoeste)
cursor: text (se muestra como el fin de un I-beam)
cursor: w-resize (una flecha apuntando hacia el oeste o hacia la izquierda)
cursor: wait (un reloj de arena)
</pre>
<pre>
Y para llamar un cursor externo
CURSOR:url(.cursores/cursor.ani);

Y sin estilo predefinido seria asi
<a href="www.pagina.com" onMouseOver="this.style.cursor='hand'">Enlace</a>

<a href="www.pagina.com" onMouseOver="this.style.cursor='wait'"><img src="ninguna.gif" border="1"></a>

<table><tr><td><font face="Arial" size="3">
<form name="formulario" action="destino.php" method="post"onsubmit="return comprueba()">
Checkbox<input onMouseOver="this.style.cursor='help'" type="checkbox" name="radio"><br>
Radio<input onMouseOver="this.style.cursor='move'" type="radio" name="radio"><br>
Texto<input onMouseOver="this.style.cursor='crosshair'" type="text" name="texto" maxlength="12"><br>
Boton<input onMouseOver="this.style.cursor='hand'" type="submit" value="confirmar"><br>
</form></td></tr></font></table>
</pre>
</body>
</html>

caricatos · #8 (**permalink**) 27/12/2002, 00:27

Hola vassk7:

Las manitas en netscape son "pointer", o sea que el que vea la página desde netscape, no va a ver la dichosa mano.
Una de las formas de poner la mano es que esté en una etiqueta <a>, y luego modificar el estilo de las propiedades :hover o :visit...
Otra manera es cambiarlo con un script:
... elemento.style.cursor = (document.all) ? "hand" : "pointer";

Tengo entendido que se puede usar en el estilo los dos valores, y el browser aplicaría el primero que conoce:
#enlace: hand pointer;

Otra cosa que se me está ocurriendo es usar el evento onmouseover:
onmouseover="this.style.cursor=mano";
... habiendo definido mano en la cabecera como:
var mano = (document.all) ? "hand":"pointer";

Espero que te sirva...

Saludos

chalito · #9 (**permalink**) 28/12/2002, 18:42

a mi parecer la mejor manera de solucionar este problemas es agregar los atrivutos que faltan directamente con la etiqueta style dentro del codigo html que deaseas cambiar, en este caso

<input type=submit value=Enviar style="estilos que falta declarar">

de esta manera podras solucionar facilmente tu problema sin tener que cambiar los estilos CSS ya definidos

Saludos

vassk7 · #10 (**permalink**) 29/12/2002, 06:58

Gracias por las respuestas y aportes. Lo que finalmente hice fue incluir dentro de cada "INPUT type='button'" el atributo class, con una clase especial para los botones. con todas las caracteristicas especiales con respecto a el resto de los input.

Saludos