Foros del web, para los que viven de bits

vassk7 · 21-dic-2002, 11: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 · 21-dic-2002, 11: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 · 21-dic-2002, 11: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 · 22-dic-2002, 03: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 · 22-dic-2002, 04: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 · 26-dic-2002, 07: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 · 26-dic-2002, 17: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 · 26-dic-2002, 23: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 · 28-dic-2002, 17: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 · 29-dic-2002, 05: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

21-dic-2002, 11:12	#1 (permalink)
vassk7 Fecha de Ingreso: noviembre-2002 Mensajes: 37	css en botones 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...

21-dic-2002, 11:32	#2 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.550	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, __________________ Lee las Políticas de los foros y escribe correctamente.

21-dic-2002, 11:56	#3 (permalink)
Kunael Fecha de Ingreso: noviembre-2002 Ubicación: Barcelona Mensajes: 164	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 __________________ Comparte tu conocimiento

22-dic-2002, 03:58	#4 (permalink)
pako Fecha de Ingreso: noviembre-2002 Ubicación: Mexico D.F. Mensajes: 949	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. __________________ SAIL TO THE STARS ON YOUR SHINING DESIRES.... REASONS THERE ARE NONE TRY THE WHISKY MADE OF GRAIN WHEN ALL IS SAID AND DONE IT ALL AMOUNTS TO JUST THE SAME.

22-dic-2002, 04:05	#5 (permalink)
pako Fecha de Ingreso: noviembre-2002 Ubicación: Mexico D.F. Mensajes: 949	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. __________________ SAIL TO THE STARS ON YOUR SHINING DESIRES.... REASONS THERE ARE NONE TRY THE WHISKY MADE OF GRAIN WHEN ALL IS SAID AND DONE IT ALL AMOUNTS TO JUST THE SAME.

26-dic-2002, 07:11	#6 (permalink)
vassk7 Fecha de Ingreso: noviembre-2002 Mensajes: 37	gracias !! 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. Última edición por vassk7; 26-dic-2002 a las 07:29.

26-dic-2002, 17:00	#7 (permalink)
pako Fecha de Ingreso: noviembre-2002 Ubicación: Mexico D.F. Mensajes: 949	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"> <!-- body { BACKGROUND-COLOR: #aaaaaa; SCROLLBAR-FACE-COLOR: #dedede; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dddddd; SCROLLBAR-3DLIGHT-COLOR: #e2e2e2; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #efefef; SCROLLBAR-DARKSHADOW-COLOR: #98aab1; FONT-FAMILY: "Small Fonts", VT100, Arial, Helvetica, sans-serif; TEXT-TRANSFORM: uppercase; FONT-SIZE: 10px; } a:link,a:active,a:visited { COLOR : #666666; } a:hover { FONT: bold normal 9px "Small Fonts", VT100, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline; COLOR : #A2A2A2; } input.button { BACKGROUND-COLOR: #CCCCCC; BORDER-BOTTOM-COLOR: #666666; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #EEEEEE; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #BBBBBB; BORDER-TOP-WIDTH: 1px; FONT: normal 9px Small Fonts, VT100, Arial, Helvetica, sans-serif; TEXT-TRANSFORM: uppercase; COLOR: #666666; CURSOR: hand; } input.texto { BACKGROUND-COLOR: #CCCCCC; BORDER-BOTTOM-COLOR: #666666; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #EEEEEE; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #BBBBBB; BORDER-TOP-WIDTH: 1px; FONT: normal 9px Small Fonts, VT100, Arial, Helvetica, sans-serif; TEXT-TRANSFORM: uppercase; COLOR: #666666; CURSOR: text; } input.radio{ CURSOR: hand; } input.checkbox{ CURSOR: hand; } --> </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> __________________ SAIL TO THE STARS ON YOUR SHINING DESIRES.... REASONS THERE ARE NONE TRY THE WHISKY MADE OF GRAIN WHEN ALL IS SAID AND DONE IT ALL AMOUNTS TO JUST THE SAME.

26-dic-2002, 23:27	#8 (permalink)
caricatos Moderador Fecha de Ingreso: noviembre-2002 Ubicación: Torremolinos (Málaga) Mensajes: 12.243	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

28-dic-2002, 17:42	#9 (permalink)
chalito Fecha de Ingreso: noviembre-2002 Ubicación: Santiago, chile Mensajes: 221	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

29-dic-2002, 05:58	#10 (permalink)
vassk7 Fecha de Ingreso: noviembre-2002 Mensajes: 37	Gracias 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

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado