Membuat Color Picxel
Cara membuat code color picker interaktif
Color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna, bila belum baca anda bisa lihat DISINI.
Tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. Dan pada kotak output disebelah bawah selain muncul kode color Hex, juga kode color RGB, dan nilai-nilai HSV, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.
Tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. Dan pada kotak output disebelah bawah selain muncul kode color Hex, juga kode color RGB, dan nilai-nilai HSV, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.
Anda bisa lihat gambar Color picker interaktif dibawah ini :
Atau anda bisa lihat dan mencobanya sendiri Color picker interaktif pada sidebar sebelah kanan halaman ini.OK... Bila nada berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman
3. Tambah Gadget
4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
5. Copy dan paste kode dibawah ini pada gadget tersebut :
<script type="text/javascript" src="http://www.switchonthecode.com/sites/default/files/64/source/javascript.js"></script>
<div style="position: relative; height: 430px; width: 295px; border: 2px solid rgb(171, 172, 172); background-color: rgb(232, 231, 234);">
<div id="gradientBox" style="cursor: crosshair; top: 5px; position: absolute; left: 5px; width: 240px; height: 256px; border: 2px solid rgb(255, 255, 255); background-color: rgb(0, 255, 255);">
<img id="gradientImg" style="display: block; width: 240px; height: 256px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_gradient.png">
<img id="circle" style="position: absolute; height: 11px; width: 11px; left: 123px; top: 122.5px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_circle.gif">
</div>
<div id="hueBarDiv" style="position: absolute; left: 255px; width: 30px; border: 2px solid rgb(255, 255, 255); background-color: rgb(217, 216, 219); height: 255px; top: 5px;">
<img style="position: absolute; height: 251px; width: 19px; left: 6px; top: 2px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_bar.png">
<img id="arrows" style="position: absolute; height: 9px; width: 30px; left: 0px; top: 124.496px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_arrows.gif">
</div>
<div style="position: absolute; left: 5px; width: 145px; height: 50px; top: 280px;">
<div style="position: absolute; border: 2px solid rgb(255, 255, 255); height: 50px; width: 150px; top: 0px; left: 0px;">
<div id="quickColor" style="position: absolute; height: 50px; width: 140px; top: 0px; left: 0px; background-color: rgb(64, 128, 128);">
</div>
<div id="staticColor" style="position: absolute; height: 50px; width: 100px; top: 0px; left: 50px; background-color: rgb(64, 128, 128);">
</div>
</div>
</div>
<table style="position: absolute; left: 170px; top: 275px; height: 30px;" width="150px">
<tbody><tr>
<td><b>Hex: </b></td>
<td>
<input size="8" id="hexBox" onchange="hexBoxChanged();" type="text">
</td>
</tr>
</tbody></table>
<a href="http://www.carabuatwebgratis.com/" target="_blank"><img style="display: block; width: 25px; height: 25px; position: absolute; left: 265px; top: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrZImDPZ2ROiuTE6LDTiL2CwCmGBxzM_Vh3FzkxrUsqDZI0smao06NQRB8GZOWSQM0ji6dbNo-UM6CpUHouaLGEVedq0sZlL6aSHRvDTTYu6ihKtd6aa0hcro5jirfLMma8AdmGlvlGCO/s75/Logo%0A%0A+cara+buat+web+gratis.jpg"></a>
<table style="position: absolute; left: 5px; top: 340px; border: 2px solid rgb(255, 255, 255);" width="285px">
<tbody><tr>
<td>Hue:</td>
<td>
<input size="8" id="hueBox" onchange="hueBoxChanged();" type="text">
</td>
<td bgcolor="red"><span style="color: rgb(255, 255, 255);"> Red: </span></td>
<td>
<input size="8" id="redBox" onchange="redBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Saturation:</td>
<td>
<input size="8" id="saturationBox" onchange="saturationBoxChanged();" type="text">
</td>
<td bgcolor="green"><span style="color: rgb(255, 255, 255);">Green:</span></td>
<td>
<input size="8" id="greenBox" onchange="greenBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Value: </td>
<td>
<input size="8" id="valueBox" onchange="valueBoxChanged();" type="text">
</td>
<td bgcolor="blue"><span style="color: rgb(255, 255, 255);"> Blue:</span></td>
<td>
<input size="8" id="blueBox" onchange="blueBoxChanged();" type="text">
</td>
</tr>
</tbody></table>
</div>
<script type="text/javascript">
fixGradientImg();
var currentColor = Colors.ColorFromRGB(64,128,128);
new dragObject("arrows", "hueBarDiv",
arrowsLowBounds, arrowsUpBounds,
arrowsDown, arrowsMoved, endMovement);
new dragObject("circle", "gradientBox",
circleLowBounds, circleUpBounds,
circleDown, circleMoved, endMovement);
colorChanged('box');
</script>
</div>
<div style="position: relative; height: 430px; width: 295px; border: 2px solid rgb(171, 172, 172); background-color: rgb(232, 231, 234);">
<div id="gradientBox" style="cursor: crosshair; top: 5px; position: absolute; left: 5px; width: 240px; height: 256px; border: 2px solid rgb(255, 255, 255); background-color: rgb(0, 255, 255);">
<img id="gradientImg" style="display: block; width: 240px; height: 256px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_gradient.png">
<img id="circle" style="position: absolute; height: 11px; width: 11px; left: 123px; top: 122.5px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_circle.gif">
</div>
<div id="hueBarDiv" style="position: absolute; left: 255px; width: 30px; border: 2px solid rgb(255, 255, 255); background-color: rgb(217, 216, 219); height: 255px; top: 5px;">
<img style="position: absolute; height: 251px; width: 19px; left: 6px; top: 2px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_bar.png">
<img id="arrows" style="position: absolute; height: 9px; width: 30px; left: 0px; top: 124.496px;" src="http://www.switchonthecode.com/sites/default/files/64/source/color_picker_arrows.gif">
</div>
<div style="position: absolute; left: 5px; width: 145px; height: 50px; top: 280px;">
<div style="position: absolute; border: 2px solid rgb(255, 255, 255); height: 50px; width: 150px; top: 0px; left: 0px;">
<div id="quickColor" style="position: absolute; height: 50px; width: 140px; top: 0px; left: 0px; background-color: rgb(64, 128, 128);">
</div>
<div id="staticColor" style="position: absolute; height: 50px; width: 100px; top: 0px; left: 50px; background-color: rgb(64, 128, 128);">
</div>
</div>
</div>
<table style="position: absolute; left: 170px; top: 275px; height: 30px;" width="150px">
<tbody><tr>
<td><b>Hex: </b></td>
<td>
<input size="8" id="hexBox" onchange="hexBoxChanged();" type="text">
</td>
</tr>
</tbody></table>
<a href="http://www.carabuatwebgratis.com/" target="_blank"><img style="display: block; width: 25px; height: 25px; position: absolute; left: 265px; top: 307px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXrZImDPZ2ROiuTE6LDTiL2CwCmGBxzM_Vh3FzkxrUsqDZI0smao06NQRB8GZOWSQM0ji6dbNo-UM6CpUHouaLGEVedq0sZlL6aSHRvDTTYu6ihKtd6aa0hcro5jirfLMma8AdmGlvlGCO/s75/Logo%0A%0A+cara+buat+web+gratis.jpg"></a>
<table style="position: absolute; left: 5px; top: 340px; border: 2px solid rgb(255, 255, 255);" width="285px">
<tbody><tr>
<td>Hue:</td>
<td>
<input size="8" id="hueBox" onchange="hueBoxChanged();" type="text">
</td>
<td bgcolor="red"><span style="color: rgb(255, 255, 255);"> Red: </span></td>
<td>
<input size="8" id="redBox" onchange="redBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Saturation:</td>
<td>
<input size="8" id="saturationBox" onchange="saturationBoxChanged();" type="text">
</td>
<td bgcolor="green"><span style="color: rgb(255, 255, 255);">Green:</span></td>
<td>
<input size="8" id="greenBox" onchange="greenBoxChanged();" type="text">
</td>
</tr>
<tr>
<td>Value: </td>
<td>
<input size="8" id="valueBox" onchange="valueBoxChanged();" type="text">
</td>
<td bgcolor="blue"><span style="color: rgb(255, 255, 255);"> Blue:</span></td>
<td>
<input size="8" id="blueBox" onchange="blueBoxChanged();" type="text">
</td>
</tr>
</tbody></table>
</div>
<script type="text/javascript">
fixGradientImg();
var currentColor = Colors.ColorFromRGB(64,128,128);
new dragObject("arrows", "hueBarDiv",
arrowsLowBounds, arrowsUpBounds,
arrowsDown, arrowsMoved, endMovement);
new dragObject("circle", "gradientBox",
circleLowBounds, circleUpBounds,
circleDown, circleMoved, endMovement);
colorChanged('box');
</script>
</div>
Catatan :
Lebar tabel Color picker interaktif ini adalah 300px, jadi area gadget yang dibutuhkan tidak kurang dari 300px.
6. Simpan.
Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
Lebar tabel Color picker interaktif ini adalah 300px, jadi area gadget yang dibutuhkan tidak kurang dari 300px.
6. Simpan.
Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.