Compartir: sobre colores.

caricatos · #1 (**permalink**) 23/04/2003, 12:45

Hola amigos:

Creo que algunos de los que participamos en estos foros, sabemos (y aplicamos) algunos trucos que son muy útiles.

Voy a comentar los pasos que he dado para obtener un select con los colores de fondo para páginas web... No todos funcionan bien. Parece que en Netscape hay más definiciones de colores que en explorer (aunque no voy a demostrarlo)...

En la discusión Todo sobre colores del foro html (aquí está el enlace ), me dieron unas direcciones sobre el tema del que me pareció útil ésta .

El enlace lo aportó furoya (también me han facilitado buenos enlaces otros contertulios... con perdón de la palabra)

En la página del enlace aparecen muchas definiciones de colores (algunas no funcionan en explorer, y tal vez en otros navegadores), y se muestran en forma tabular el nombre del color, lo mismo pero con el fondo del color nominado, seguido del valor de las tres componentes del color (RGB), y por último el valor del color en formato #RRGGBB... (Espero que me entiendan)

Me fijé en el código, pero no lo vi muy claro, así que decidí obtener la lista "a mi manera"...

... Desde mi navegador seleccioné el texto (en forma tabular) y lo copié al portapapeles, y lo guardé en un archivo de mi ordenador.

Ahora es donde empieza el truco.

A ese fichero le di extensión html, y le puse la cabecera y cola habitual...
<html><body>...</body></html>

y a lo que había pegado lo encerré entre etiquetas div (tal vez no hubiera sido necesario...

) con un atributo id=datos.

Luego puse el siguiente script:

Código PHP:

  function hacerLista()    { 
    var todo = document.getElementById("datos").innerHTML.split(" "); 
    var Colores = "var colores = [\n"; 
    for (var i = 0; i < todo.length; i ++) 
        if (i % 6 == 0)    { 
            Colores += "\t\"" + todo[i] + "." + todo[i + 5]; 
            Colores += (i + 7 > todo.length) ? "\"\n" : "\",\n"; 
        } 
    Colores += "];\n"; 
    document.getElementById("detalle").value = Colores; 
}

(No comenté que había puesto un textarea con el id=detalle...)

Pueden ver el resultado en esta página ...

Si les interesa la historia y quieren saber el final, seguiré con el relato...

Saludos

Carlitos · #2 (**permalink**) 23/04/2003, 14:30

Oye, es muy útil. Creéme.

Buen trabajo.

caricatos · #3 (**permalink**) 24/04/2003, 02:21

Hola otra vez:

Bueno terminaré la explicación...

Lo importante es que con el método anterior se consigue el array de todos los colores, en un texto que sencillamente hay que copiar y pegar dentro de un script, y a partir de hay se pueden poner en una tabla o en un select...

Lo de la tabla lo he descartado porque se haría demasiado larga, pero fabricar el select fué muy fácil...

Tan solo se crea un select vacío y un id para referenciarlo, (si nos va a ser útil en un formulario, sería mejor usar el atributo name)

... Luego se añade (si se quiere) el típico option "Seleccione... bla, bla, bla"
y un bucle que recorra el array de colores como hice el array usando un separador a mi elección (usé el punto, pero ahora pienso que más didáctico hubiera sido usar "="), use ese mismo separador para separar la cadena en un array de dos elementos a partir del método split... (se hubiera podido usar la combinación substring/charAt)

Y por último solo quedaba darle un color de fondo a los elementos del select...

Código PHP:

  <select id=SelecColores onchange=' if (this.selectedIndex > 0 ) alert("color:" + this.value + "\nvalor: " + this.options[this.selectedIndex].text)'></select> 
</select> 
<script language=javascript> 
//alert("hay un total de:\n" + colores.length + " colores..."); 
document.getElementById("SelecColores").add(new Option("Seleccione un color de la lista", "")) 
for (var i = 0; i < colores.length; i ++) 
    document.getElementById("SelecColores").add(new Option(colores[i].split(".")[0], colores[i].split(".")[1])); 
for (var i = 1; i < colores.length; i ++) 
    document.getElementById("SelecColores").options[i + 1].style.backgroundColor = colores[i].split(".")[1]; 
</script>

Un par de apuntes adicionales:

Como queda muy mal (estéticamente hablando) la lista de elementos en la página, he puesto el estilo display=none
Y por último decir que algunos de los colores no funcionan en explorer (la definición)

Saludos