Wednesday, August 15, 2007

TUTORIAL MEMBUAT SITE (Course 4 [ contoh script-1 ] )

Semua teori dari Claw dah selese.. nih ada hadiah beberapa script dari dia untuk dicoba praktekkkan. monggo dicoba.

Membuat pengunjung bisa mengganti warna latar blakang situs lo.

<html>
<head>
<title> Background color picker </title>
<script language="JavaScript">
<!--//Heres the code for the RGB in paint.
function rgb(x)
{
var value=0;
var value_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var first=x.charAt(0);
var second=x.charAt(1);
var a=0;
var b=0;
while (value_array[value]!=first)
{
value++;
a=a+16;
}
value="0";
while (value_array[value]!=second)
{
value++;
b++;
}
x=a+b;
return x;
}
// end RGB in paint-->
</script>

<script language="JavaScript">
<!-- Heres the code to type in you own Hexadecimal value
function changeBack()
{
var hex=window.document.f.c.value;
document.bgColor=hex;
var hex1=hex.charAt(0);
if (hex1!="#")
{
hex=document.bgColor;
}
var red=hex.substring (1,3);
var rdd=rgb(red);
document.bb.re.value=rdd;
var green=hex.substring (3,5);
var grn=rgb(green);
document.cc.gr.value=grn;
var blue=hex.substring (5,7);
var blue1=rgb(blue);
document.dd.bl.value=blue1;
}
// End own Hexadecimal-->
</script>

<script language="JavaScript">
<!--Here's the code to type in your own RGB
function changeBackRGB()
{
var red=window.document.bb.re.value;
var green=window.document.cc.gr.value;
var blue=window.document.dd.bl.value;
red1=rgb_hex(red);
green1=rgb_hex(green);
blue1=rgb_hex(blue);
var hex="#"+red1+green1+blue1;
document.bgColor=hex;
document.f.c.value=hex;
}
// End your own RGB-->

//<!-- Change from RGB to hexadecimal
function rgb_hex(colour)
{
var rgb_array=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
if (colour==0)
{
var colour="00";
return colour;
}
else
{
var y=colour/16;
var y=y+"a";
if (y.indexOf(".")==-1)
{
var hex2="0";
var u=y.indexOf("a");
var q=y.substring(0,u);
var hex1=rgb_array[q];
}
else
{
var l=y.split(".");
var q=l[0];
var z=q*16;
var xyz=colour-z;
var hex1=rgb_array[q];
var hex2=rgb_array[xyz];
}
var colour=hex1+hex2;
return colour;
}
}
// end-->
</script>

<script language="JavaScript">
<!--Here's the background changer for the cube
leftclick=0;

function r(hval)
{
if (leftclick==0)
{
document.bgColor=hval;
document.f.c.value=hval;
var red=hval.substring (1,3);
var rdd=rgb(red);
document.bb.re.value=rdd;
var green=hval.substring (3,5);
var grn=rgb(green);
document.cc.gr.value=grn;
var blue=hval.substring (5,7);
var blue1=rgb(blue);
document.dd.bl.value=blue1;
document.colour1.colour2.value="";
}
}
//end changer
//Heres the lock button
function lock()
{
if (leftclick==0)
{
leftclick=1;
}
else
{
leftclick=0;
}
}
//end lock-->
</script>

<script language="JavaScript">
<!-- Reverse Lookup Color
function changeColor()
{
var clr=window.document.colour1.colour2.value;
document.f.c.value=clr;
var clr=changeBack();
var clr=changeBackRGB();
}
// End Reverse Lookup Color-->
</script>

</head>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<body>

<center>
<h3>Kubik Warna</h3></center>
<center>
<p></p>
</center>
<center>
<table>

<script language="JavaScript">
<!-- Cube Maker
var hex_Red=new Array("00","33","66","99","cc","ff");
var hex_Green=new Array("00","33","66","99","cc","ff");
var hex_Blue=new Array("00","33","66","99","cc","ff");
var hexred="00";
var hexgreen="00";
var hexblue="00";
var red=0;
var green=0;
var blue=0;
var x=0;
var y=0;
var z=0;
var xyz=0;

while (y<6)
{
window.document.write("<tr>");
var x=0;
var hexblue=hex_Blue[blue];
while (x<6)
{
var z=0;
var hexgreen=hex_Green[green];
while (z<6)
{
var hexred=hex_Red[red];
var hexadecimal="#"+hexred+hexgreen+hexblue;
window.document.write("<td bgColor="+hexadecimal+"><a href=\"javascript:lock()\" onmouseover=\"r('"+hexadecimal+"'); return true\"><img src=\"\" border=\"0\" height=\"20\" width=\"20\"/></a></td>");
z++;
red++;
if (red==6)
{
red=0;
}
}
x++;
green++;
if (green==6)
{
green=0;
}
xyz++;
if (xyz==3)
{
window.document.write("</tr>");
xyz=0;
}
}
y++;
blue++
if (blue==6)
{
blue=0;
}
}
// End color cube. -->
</script>

</table>
</center>

<center><form name="f" onSubmit="changeBack(); return false;"><input type="text" name="c" size="7"></form></center>

<center>
<p></p>
</center>
<table align="center">
<tr>
<td align="center" width="100">Red</td>
<td align="center" width="100">Green</td>
<td align="center" width="100">Blue</td>
</tr>
<tr>
<td align="center"><form name="bb" onSubmit="changeBackRGB(); return false;"><input type="text" name="re" size="2"></form></td>
<td align="center"><form name="cc" onSubmit="changeBackRGB(); return false;"><input type="text" name="gr" size="2"></form></td>
<td align="center"><form name="dd" onSubmit="changeBackRGB(); return false;"><input type="text" name="bl" size="2"></form></td>
</tr>
</table>

<center>
<table>

<tr><td align="center"><form><input type="button" value="Reverse Lookup - Hexadecimal" size="10" onClick="changeBack(); return false;"></form></td>
<td align="center"><form><input type="button" value="Reverse Lookup - RGB" size="10" onClick="changeBackRGB(); return false;" ></form></td></tr>

<tr><td align="center" colspan="2"><form><input type="button" value="Reverse Lookup - Color (ex. Red, Green...)" size="15" onClick="changeColor()"; return false;"></form></td></tr>

<tr><td align="center" colspan="2"><form name="colour1" onSubmit="changeColor(); return false;"><input type="text" name="colour2" size="7"></form></td></tr>

</table>
</center>
</body>
</html>

Membuat halaman situs ngeflash


<html>
<head><title>Blinking Background</title>
<script language="JavaScript">
<!-- hiding
function blinkit(){
intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 200;
setTimeout("document.bgColor='#0000FF';",intrvl);
intrvl += 200;
setTimeout("document.bgColor='#FFFFFF';",intrvl);
}
}
// End -->
</script>
<!-- STEP TWO: Add this form to the body of the HTML document -->
<body>
<center>
<form>
<input type="BUTTON" value="Blink" onClick="blinkit()">
</form>
<p><center>
<p></p>
</body>
</html>

Gambar Latar Yang Bergerak.

<html>
<head>
<title>Scrolling Background Image</title>
<body background="******************************URL GAMBAR KAMU************************">
<script language="JavaScript">
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</script>
</body>
</html>


2 Comments:

Curly and Chubby said...

waaa..makasi yaa..seneng bgt!!!

bisa dipraktekin, nanti klo mau gw praktekin tgl klik ksini ajaa. heheheheh...

apalg ada buat ngebikin bekgron bergerak ama yg ada flashnya. seru bgt!!

nanti dicoba2

tenkyu berat. berguna bgt nih! =)

e-learning said...

ok.. ditunggu artikel.. tentang script lanjutannya yach..