Hola
radge :
Para empezar, si buscas un código en HTML te equivocaste de foro : estamos es JavaScript. Pero no le hace mucha diferencia, porque seguramente el mensaje terminaría movido a este foro tarde o temprano.
Nunca había vsto ese
INPUT; lo pobé en
IE5 y no funciona, sospecho que debe ser un código propietario de algún otro navegador ( ¿
Conqueror? , ¿
Safari? *) y por eso es ignorado en los demás.
Ésto no significa que en HTML no existan los botones deslizantes, lo que ocurre es que, al igual que con otros elementos como p.e. el
BUTTON, tiene muy poca utilidad en este lenguaje y hay que combinarlo con JavaScript para que tenga un uso más flexible ( agregándole un evento tipo
onclick u
onmouseover con una función ). Por eso decía que tu mensaje iba a ser trasladado aquí en algún momento.
Si alguien todavía no se dió cuenta de qué botón deslizante estoy hablando, puede miar hacia la derecha ( esa derecha → ), allá donde termina la ventana.
. . .
Sí, las
scrollbars contienen un botón deslizable, que en HTM sólo sirve para mover bloques, pero en JS se puede leer el desplazamiento y así modificar variables.
Dejo un ejemplo típico : todos conocemos las barras RGB de los editores de color. Éstas no son muy precisas, pero están sólo de muestra.
El código está hecho para
IE ( mejor
5.5+ ) pero seguramente se puede adaptar a otros navegadores.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<HTML>
<HEAD>
<TITLE> CAMBIA COLOR CON BOTONES DESLIZANTES.</TITLE>
<SCRIPT>
<!--
var cRojo=0;
var cVerde=0;
var cAzul=0;
var vHexa="0123456789ABCDEF";
function Rojo(){
r=bRojo.scrollLeft;
cRojo=Math.floor(r/4);
if(cRojo>255){cRojo=255};
frm.dRojo.value=cRojo;
hR= vHexa.charAt(parseInt(cRojo/16)) + vHexa.charAt(cRojo%16)
frm.hRojo.value=hR;
pR=Math.ceil(cRojo*100/256);
frm.pRojo.value=pR;
color()
}
function Verde(){
v=bVerde.scrollLeft;
cVerde=Math.floor(v/4);
if(cVerde>255){cVerde=255};
frm.dVerde.value=cVerde;
hV= vHexa.charAt(parseInt(cVerde/16)) + vHexa.charAt(cVerde%16)
frm.hVerde.value=hV;
pV=Math.ceil(cVerde*100/256);
frm.pVerde.value=pV;
color()
}
function Azul(){
a=bAzul.scrollLeft;
cAzul=Math.floor(a/4);
if(cAzul>255){cAzul=255};
frm.dAzul.value=cAzul;
hA= vHexa.charAt(parseInt(cAzul/16)) + vHexa.charAt(cAzul%16)
frm.hAzul.value=hA;
pA=Math.ceil(cAzul*100/256);
frm.pAzul.value=pA;
color()
}
function color(){
muestra.style.background='rgb('+ cRojo +','+ cVerde +','+ cAzul +')';
}
// -->
</SCRIPT>
<STYLE>
<!--
#bRojo{zoom:0.75; scrollbar-face-color:red; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#FFDDDD; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#bVerde{zoom:0.75; scrollbar-face-color:#00FF00; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#DDFFDD; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#bAzul{zoom:0.75; scrollbar-face-color:#0000FF; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#DDDDFF; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#muestra{background:#000000; text-align:center; font-family:sans-serif; font-weight:bold}
td{padding:0 10px;background:#FFFFFF; cursor:default}
input{text-align:center; cursor:default}
#codigo{cursor:hand}
#codigo{cursor:pointer}
// -->
</STYLE>
</HEAD>
<BODY onload=document.frm.reset()>
<h2>Botones deslizantes usando <i>scrollbars</i> para modificar la composición de color.</h2>
<center>
<table id=muestra name=muestra border=0 cellspacing=0>
<form name=frm>
<tr> <td width=150> COLOR </td> <td> </td> <td title="Valor en Decimal."> D </td> <td title="Valor en Hexadecimal."> H </td> <td title="Valor en Porcentaje."> % </td> <td> BARRAS </td> </tr>
<tr> <td style=background:transparent"> </td> <td title="Rojo."> R </td> <td><input id=dRojo name=dRojo size=3 value="0" readonly> </td> <td> <input id=hRojo name=hRojo size=3 value="00" readonly> </td> <td> <input id=pRojo name=pRojo size=3 value="0" readonly> </td> <td> <div onscroll=Rojo() id=bRojo name=bRojo style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>
<tr> <td style=background:transparent"> </td> <td title="Verde."> G </td> <td><input id=dVerde name=dVerde size=3 value="0" readonly> </td> <td> <input id=hVerde name=hVerde size=3 value="00" readonly> </td> <td> <input id=pVerde name=pVerde size=3 value="0" readonly> </td> <td> <div onscroll=Verde() id=bVerde name=bVerde style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>
<tr> <td style=background:transparent"> </td> <td title="Azul."> B </td> <td><input id=dAzul name=dAzul size=3 value="0" readonly> </td> <td> <input id=hAzul name=hAzul size=3 value="00" readonly> </td> <td> <input id=pAzul name=pAzul size=3 value="0" readonly> </td> <td> <div onscroll=Azul() id=bAzul name=bAzul style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>
</form>
</table>
<p>
<button onclick="codigo.value='rgb('+ frm.dRojo.value +','+ frm.dVerde.value +','+ frm.dAzul.value +');'">Código Decimal</button>
<button onclick="codigo.value='#'+ frm.hRojo.value+frm.hVerde.value+frm.hAzul.value +';'">Código Hexadecimal</button>
<button onclick="codigo.value='rgb('+ frm.pRojo.value +'%,'+ frm.pVerde.value +'%,'+ frm.pAzul.value +'%);'">Código porcentaje</button>
<input size=20 onclick="this.select();document.execCommand('Copy')" id=codigo title="Click para copiar."> <p>
</BODY>
</HTML>
<!--
posLeft
pixelLeft
.offsetParent
-->
Por otro lado, si no te gusta el formato, puedes aprovechar que estás en este foro y buscar en las FAQ o con el buscador interno; hay decenas de ejemplos hechos principalmente con imágenes que te permiten darle a tu '
slidebar / trackbar ' el aspecto que quieras.
Lo que me recuerda . . . En el tema
Todo sobre colores ,
caricatos puso un
link a una página con una herramienta como la que posteé más arriba, pero con barras más presentables. No te dejo el enlace porque intenté entrar un par de veces y no la hallé. Seguramente la movió a otra dirección. Si tenemos suerte
caricatos tal vez lea este tema y nos dé la nueva ruta ( la página era muy buena ); o quizá se la pida por MP.
Espero que algo de ésto te sirva.
saludos
furoya
Edición : * - En
Safari y
Opera ya anda, y es el mismo código
Código:
<input type="range" min="0" max="150" value="70" step="10" onmouseout="alert(this.value)">