Cara Membuat Color Picker - Box Kode Warna Modern

Coba Sobat Blogger lihat ke sidebar bawah. ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
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/AVvXsEjhjrX-yfSWxEAEaU5y5K6JFnuvXxwRA2Q7iILG1xdaAiyn6x1VuzC9RojA11IrsSBUc0bFR8UMC-WFx5MhxQTLc9pYNIcciE-yzJyojYOVR7PRHvaGOpvvRXqtDEqkPYB9BCBwscj5Gptb/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.
Selamat Mencoba!!!

Popular Posts

Cara Membuat Color Picker - Box Kode Warna Modern

0 komentar on Cara Membuat Color Picker - Box Kode Warna Modern :

Post a Comment and Don't Spam!

Like Us

Category

Tukeran Link