Ver Mensaje Individual
  #13 (permalink)  
Antiguo 22/04/2003, 07:15
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Impresionante tu página sobre Colores ( o, más bien, tus códigos usando como excusa los colores ).

Aunque no es mucho lo que puedo aportar, me gustaría saber si entendí bien algunos de tus comentarios que tienen que ver con HTML.

Cita:
"... Otra cosa de los colores es la transparencia, que se puede aplicar al fondo de los elementos, pero no en el "frente"...
"style.backgroundColor" y NO "style.color" ..."
Me desorientó un poco la referencia CSS; pero cuando abrí los select y vi que tenían color de fondo y no de texto; los asocié con tu comentario. No sé en qué navegadores no funciona el color : de opciones, yo uso IE 5.5 y no tuve ese problema; pero sí tuve otros de "edición" y formato, que terminé resolviendo de manera radical : fabricando mis propios select .

La cuestión original era poder editar el contenido del select cuando el valor buscado no estaba entre las opciones; como no hallé el modo, hice una versión en HTM, CSS y algo de JS que, por supuesto, habrá que adaptar para poder verla en cualquier navegador, pero que ya no va a tener las limitaciones de formato de los verdaderos select .
Éste sería un ejemplo simple a modo de muestra :

Código:
<html> 
<head> 
<title> FALSO 'SELECT' 
EDITABLE.</title> 
<SCRIPT>
<!-- 
function verColor(){
vCol.style.background=editable.value}

function opciones(){
if(contOpc.style.display=='none'){
contOpc.style.display='';}
else{
contOpc.style.display='none';}
}

function pasar(v){
editable.value=v;
}
// --> 
</SCRIPT> 
<STYLE>
<!--
.opc{width:118px}
.opcs{width:118px; background:Highlight; color:HighlightText}
// -->
</STYLE>
</head> 
<body >
<h2>Tabla imitando un 
<tt>select</tt> editable.</h2>

<table align=center cellpadding=0 
cellspacing=0 height=40> <tr>
<td width=100>
<div style="display:none; position:absolute; 
background:white; cursor:default; border:1px solid black; 
margin-top:20px; font:13px sans-serif" id=contOpc>
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('BLUE')> 
<font style="background:blue; color:blue; 
 position:relative; float:right"> _ _.</font>BLUE</span><br> 
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('GREEN')> 
<font style="background:green; color:green; 
 position:relative; float:right"> _ _.</font>GREEN</span><br> 
<span class=opc 
onmouseover="this.className='opcs';" 
onmouseout="this.className='opc';" 
onmousedown=pasar('RED')> 
<font style="background:red; color:red; 
 position:relative; float:right"> _ _. </font>RED</span> </div>
<input id=editable value='BUTTONFACE' style="width:100px; 
font:13px sans-serif">
</td><td><button 
style="font:12px; margin-top:-1px; width:20px;" 
onblur=opciones() onclick=opciones() tabindex="-1">
▼</button></td>
</tr></table>
<p>
<center><button onclick=verColor() id=vCol style="height:100px; 
width:150px; border-width:8px; background:buttonface">
<font style="background:buttonface"</font>
VER COLOR</button> </center>
</body> 
</html>
Aún no estoy seguro de que éste haya sido el motivo de tu comentario, pero ya que tenía el código hecho ...

Cita:
"...También sé que hay distintos grados de opacidad/transparencia (filtros alfa)... pero sobre eso, realmente sé muy poco. ..."
Aquí cabe una aclaración : el filtro alpha , como mask , wave , etc., tienen copyright de Microsoft, y sólo funcionan en su navegador. Fueron hechos originalmente para imágenes, aunque en algunos casos funcionan en texto y elementos coloreados, pero no directamente sobre los colores.

Código:
 
<html> 
<head> 
<title> FILTROS IE CON 
COLORES.</title>  
<STYLE>
<!--
td{border:1px inset; white-space:nowrap; text-align:center}
.btn{width:300px}
// -->
</STYLE>
</head> 
<body bgcolor=#DDDDDD>
<table cellspacing=20 align=center><tr>
<td id=mA>&nbsp</td><td> 
<input onfocus="mA.style.filter=''" value="#FFFFFF" size=14 
name=gs> &nbsp; <input type=button value="Ver Color" 
onclick="mA.style.background=gs.value;"> <br> 
<input type=button value="Cambiar a Tono de Gris" 
onclick="mA.style.filter='gray()'" class=btn></td>
</tr><tr>
<td id=mB>&nbsp</td><td> 
<input onfocus="mB.style.filter=''" value="#FFFFFF" size=14 
name=ng > &nbsp; <input type=button value="Ver Color" 
onclick="mB.style.background=ng.value;"> <br> 
<input type=button value="Cambiar a Negativo" 
onclick="mB.style.filter='invert()'" class=btn></td>
</tr><tr>
<td id=mC0> 
<div style="height:100px; width:75px" id=mC1></td> 
<td align=center> 
<input value="#FFFFFF" size=14 name=fo 
onfocus="mC1.style.background='transparent'"> &nbsp; 
<input type=button value="Ver Color Fondo" 
onclick="mC0.style.background=fo.value; mC1.style.background=
'transparent'"> <br> 
<input 
onfocus="mC1.style.filter=''; 
mC1.style.background=fr.value" value="transparent" 
size=14 name=fr > &nbsp; 
<input type=button value="Ver Color Frente" 
onclick="mC1.style.filter=''; 
mC1.style.background=fr.value;"> <br> 
<input value="50" size=3 name=op 
onblur="if(this.value>100 || this.value<0){alert
('Escriba un Porcentaje de 'Opacidad entre 0 y 100.')
; op.value='50'}">% de Opacidad Color Frente. <br> 
<input type=button value="Mezclar Colores" 
onclick="mC1.style.background=fr.value; 
mC0.style.background=fo.value; 
mC1.style.filter=
'alpha(opacity='+op.value+')'" class=btn></td>
</tr></table>
</body> 
</html>
Cita:
"... En explorer se muestran en formato #RRGGBB, y en netscape url(R,G,B)... "
Por último, no me puse a contarlos, pero usando el ojímetro me pareció que usaste los 140 colores de la paleta IE. Netscape o Linux tienen bastantes nombres más ( LIGHTGOLDENROD VIOLETRED LIGHTSLATEBLUE FUCHSIA ), hasta algunos incompatibles entre navegadores. Ya que tu página funciona en todos, sería conveniente hacer la aclaración.

Sinceramente te felicito por tu página, voy a empezar a estudiarla para ver si aprendo algo.

Saludos.
Furoya.


http://www.v-d-l.com/tut_fm_colors.html

http://users.rcn.com/giant.interport...Specifier.html

http://javascriptkit.com/script/script2/colorbar.htm

http://www.dynamicdrive.com/dynamici...lter/index.htm