Asrul Hoesein Diary: Cara Membuat Color Picker

Sobat Blogger!!! dalam kunjungan rutin saya ke lapak Blogger’s Family, tepatnya di/pada weblog Sobat Muhamad Iqbal, saya dapatkan Box Kode Warna ini, tepatnya dibagian kanan bawah, saya tertarik dan memang manfaat untuk di posting sebagai referensi blog. Ini dia hasil copasnya, silakan simak dan bila tertarik untuk aplikasi atau repost ke website atau weblog sobat, silakan CoPas dan jangan lupa komentarnya sebelum tinggalkan postingan ini.

Coba Sobat Blogger lihat ke bagian bawah postingan ini →→→→→→→→→Kan ada kotak tuh. Kalau Anda punya PS (Photoshop) mungkin sudah tahu apa itu. Yap, itu namanya Color Picker. Color Picker merupakan nama lain dari Kode Warna. Mengapa berbeda dari Kode Warna seperti biasanya? Mungkin, Anda semua tahu kelebihannya, yaitu :

Kode yang digunakan lebih sedikit dan tidak mengganggu Template Blog
Adanya RGB counter. (red,green,blue)
Adanya Hex Color. (Code warna ex: #ff00ff)
Adanya HSV counter seperti di Photoshop.

Okelah kalau begitu, ini Saya kasih Kode Javascript-nya!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Iqbal" />

<title>Kode Warna</title>
</head>

<body>

<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://muhamad-iqbal-blog.blogspot.com" 
target="_blank"><img style="display: block; width: 94px; height: 
16px; position: absolute; left: 180px; top: 307px;" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt28B5Rst2ds2CFZsDK0H7P627t7nIy5rPojURhhu4pxnsak0QpTMLwfmM5FNbSpk4ELvUONFTtoNuKfV4qw11cP_qpJkpf1c3-YLGKE2R_mg8dhTa9X6XHFyWRyaP5RvrG6heOwG8f36p/s1600/Banner.png"></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>

</body>
</html>

CoPas kode di atas ke mana saja, seperti Widget Blogger atau halaman tertentu.

dan Hasilnya begini sobat :

Kode Warna

Hex:

Hue:		Red:
Saturation:		Green:
Value:		Blue:

Selamat Mencoba...!!! Sukses

Tidak ada komentar:

Posting Komentar

Mari Gabung Diskusi serta Mohon komentar dengan sopan, jangan SPAM atau SARA. Komentar SPAM atau SARA akan dihapus..Blog ini Bersifat Dofollow, Anda komentar dapat Backlink Otomatis untuk Meningkatkan PR Blog Anda...Terima kasih atas Kunjungan,Salam Sukses....!!!

Asrul Hoesein Diary

Rabu, 15 Juni 2011

Cara Membuat Color Picker - Box Kode Warna Modern

Tidak ada komentar:

Posting Komentar