- Home Page
- > Script DHTML
- > Script DHTML Various
- > Hex Colors
Hex Colors
Produces the hexadecimal code for the colors.
<HTML><HEAD><TITLE>TITOLO</TITLE>
<SCRIPT>
var R=0
var G=0
var B=0
function toHex(N){
N=Math.max(0,N)
N=Math.min(255,N)
return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16)
}
function set(){
R=R_slider.style.pixelLeft
G=G_slider.style.pixelLeft
B=B_slider.style.pixelLeft
R=Math.max(0,R)
R=Math.min(255,R)
G=Math.max(0,G)
G=Math.min(255,G)
B=Math.max(0,B)
B=Math.min(255,B)
var color="#"+toHex(R)+toHex(G)+toHex(B)
hex_color.value=color
cur.style.backgroundColor=color
rUp.style.backgroundColor="#"+toHex(R)+"00"+"00"
gUp.style.backgroundColor="#"+"00"+toHex(G)+"00"
bUp.style.backgroundColor="#"+"00"+"00"+toHex(B)
}
function setColor(v){
var x=event.clientX-5
if(x>255) x=255
if(x<0) x=0
eval(v+"_slider").style.pixelLeft=x
eval(v+"_value").innerHTML=x
set()
}
</SCRIPT>
<SCRIPT>
var off,curD,dragging
function start_drag(){
off=event.clientX-curD.style.pixelLeft
}
function drag(){
if(dragging){
x=event.clientX-off
if(curD.style.pixelLeft>=0 && curD.style.pixelLeft<=255){
curD.style.pixelLeft=x
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
set()
}
if(curD.style.pixelLeft>255){
curD.style.pixelLeft=255;
//alert("Sorry, but you can not have RGB values that are over 255!")
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
}
if(curD.style.pixelLeft<0){
curD.style.pixelLeft=0
//alert("Sorry, but you can not have RGB values that are under 255!")
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
}
}
return false
}
document.onmousemove=drag
document.onmouseup=new Function("dragging=false;")
</SCRIPT>
<STYLE>.slider_bar {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-SIZE: 0px; BACKGROUND:
menu; LEFT: 0px; BORDER-LEFT: thin outset; WIDTH: 9px; CURSOR: nw-resize;
BORDER-BOTTOM: thin outset; POSITION: absolute; TOP: auto; HEIGHT: 20px
}
.slider {
BORDER-RIGHT: thin inset; BORDER-TOP: thin inset; FONT-SIZE: 10px; BACKGROUND:
white; LEFT: 0px; BORDER-LEFT: thin inset; WIDTH: 265px; BORDER-BOTTOM: thin
inset; POSITION: absolute; TOP: auto; HEIGHT: 20px; TEXT-ALIGN: center
}
.small_box {
BORDER-RIGHT: thin inset; BORDER-TOP: thin inset; FONT-SIZE: 0px; LEFT: 270px;
BORDER-LEFT: thin inset; WIDTH: 20px; BORDER-BOTTOM: thin inset; POSITION:
absolute; TOP: auto; HEIGHT: 20px; TEXT-ALIGN: center
}
.large_box {
BORDER-RIGHT: thin inset; BORDER-TOP: thin inset; FONT-SIZE: 0px; BORDER-LEFT:
thin inset; WIDTH: 40px; BORDER-BOTTOM: thin inset; HEIGHT: 40px; TEXT-ALIGN:
center
}
.button {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-SIZE: 12px; BACKGROUND:
menu; LEFT: auto; BORDER-LEFT: thin outset; WIDTH: 120px; CURSOR: nw-resize;
BORDER-BOTTOM: thin outset; POSITION: absolute; TOP: auto; HEIGHT: 20px;
TEXT-ALIGN: center
}
.preset {
BORDER-RIGHT: thin inset; BORDER-TOP: thin inset; FONT-SIZE: 0px; LEFT: 270px;
BORDER-LEFT: thin inset; WIDTH: 15px; BORDER-BOTTOM: thin inset; POSITION:
absolute; TOP: auto; HEIGHT: 15px; TEXT-ALIGN: center
}
.slider_box {
LEFT: auto; POSITION: absolute; TOP: auto
}
</STYLE>
<BODY onload="cur=test; set()">
<DIV align=center>
<H1>Ricava il colore in formato esadecimale per Html</H1></DIV>
<OL>Puoi inserire il codice esadecimale nel campo input che trovi in basso
e
poi premere "Calcola", oppure muovere le barre grigie che trovi
sopra le tre
strisce </OL><SPAN class=large_box id=test></SPAN><BR><SPAN
class=slider
id=R_value onclick="setColor('R')" align="left">0</SPAN> <SPAN
onmouseup="this.style.background='menu'" class=slider_bar
onmousedown="curD=this; dragging=true; start_drag(); this.style.background='white'"
id=R_slider value="R"></SPAN><SPAN class=small_box
id=rUp></SPAN><BR><SPAN
class=slider id=G_value onclick="setColor('G')" align="left">0</SPAN> <SPAN
onmouseup="this.style.background='menu'" class=slider_bar
onmousedown="curD=this; dragging=true; start_drag(); this.style.background='white'"
id=G_slider value="G"></SPAN><SPAN class=small_box
id=gUp></SPAN><BR><SPAN
class=slider id=B_value onclick="setColor('B')" align="left">0</SPAN> <SPAN
onmouseup="this.style.background='menu'" class=slider_bar
onmousedown="curD=this; dragging=true; start_drag(); this.style.background='white'"
id=B_slider value="B"></SPAN><SPAN class=small_box
id=bUp></SPAN><BR><INPUT
maxLength=7 size=7 name=hex_color> <SPAN
onmouseup="this.style.borderStyle='outset'" class=button
onmousedown="this.style.borderStyle='inset'"
onclick=setFromHex()>Calcola</SPAN><BR>
<SCRIPT>
function setFromHex(){
var h=hex_color.value
if(h.charAt(0)=="#"){h=h.substring(1,h.length)}
h=h.split("")
var no="ghijklmnopqrstuvwxyz"
for(var i=0;i<no.length;i++){
if(no.indexOf(h[i])!=-1){h[i]="F"}
}
h=h.join("")
R=toDec(h.substring(0,2))
G=toDec(h.substring(2,4))
B=toDec(h.substring(4,6))
R_slider.style.pixelLeft=R
G_slider.style.pixelLeft=G
B_slider.style.pixelLeft=B
R_value.innerHTML=R
G_value.innerHTML=G
B_value.innerHTML=B
set()
}
function toDec(h){
return parseInt(h,16)
}
</SCRIPT>
</BODY></HTML>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.