Ver Mensaje Individual
  #213 (permalink)  
Antiguo 09/05/2005, 10:55
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 11 meses
Puntos: 61
215. Selector de color

P.- Cómo hacer un selector de color?
R.-Hay varias opciones. Una de las mismas es este código que propongo:

Código PHP:
<html
<
head

<
script

//Script de KarlanKas para Foros Del Web 
//Muchas gracias a caricatos por advertirme de los fallitos ;-) 
//He aprovechado para mejorar un poco el script 

hexadecimal=['0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'A' 'B' 'C' 'D' 'E' 'F']; 
r=0
g=0
b=0
colores=["r","g","b"]; 

function 
color(incremento,n){ 

    if(eval(
colores[n])+incremento<256 && eval(colores[n])+incremento>-1){ 
        eval(
colores[n]+"+="+incremento); 
    } 

    
document.getElementById("campo").style.backgroundColor="rgb("+r+","+g+","+b+")"
    
document.getElementById("campo").style.color="rgb("+(255-r)+","+(255-g)+","+(255-b)+")"
     
    
document.getElementById("color").value="#"+convertir(r)+convertir(g)+convertir(b); 
    
document.getElementById("color2").value="rgb("+r+","+g+","+b+")"



function 
convertir(numero){ 
    
numero=parseInt(numero
    
enHexa=hexadecimal[parseInt(numero/16)]+""+hexadecimal[numero%16]; 
    return 
enHexa

</script> 

<style> 
*{ 
    font:normal 10px/10px verdana; 

#campo{ 
    height:400px; 

div[id="campo"]{ 
    height:210px!important; 

#campo{ 
    width:400px; 
    background-color:rgb(0,0,0); 
    font:bold 20px/20px verdana; 
    color:#fff; 
    text-align:center; 
    padding-top:190px; 

</style> 
</head> 

<body> 

<div style="width:400px;"> 
    <div id="campo" >FOROS DEL WEB</div> 

    <table>
        <tr>
            <td>En Hexadecimal:</td>
            <td><input type="text" name="color" id="color" readonly></td>
        <tr>
            <td>En Decimal:</td>
            <td><input type="text" name="color2" id="color2" readonly><br></td>
        </tr>
    </table> 
    <div style="float:left;border:solid 1px black;padding:10px;width:110px;">Mantén apretado cada botón hasta llegar al valor deseado.</div> 
    <table style="text-align:center;"> 
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,0)',100)"></td>
            <td>Rojo</td> 
            <td><input type="button" onmouseup="clearInterval(pepe)"   value="+" onmousedown="pepe=setInterval('color(5,0)',100)"></td>
        </tr> 
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,1)',100)"></td>
            <td>Verde</td>
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,1)',100)"></td>
        </tr>
        <tr> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,2)',100)"></td> 
            <td>Azul</td> 
            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,2)',100)"></td> 
        </tr> 
    </table> 
</div> 

</body> 
</html> 
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 09/05/2005 a las 17:21