Cara membuat link berkedip warna warni

Chyberart - Pada waktu pertama kali saya belajar mengelola blog, banyak hal yang menarik yang saya temui salah satunya saya menemui blog yang linknya berwarna warni ketika kursor berada diatas link tersebut. Saya jadi tertarik bagai mana membuatnya. Saya cari-cari digoogle banyak sekali informasi tentang cara membuat link berkedip warna warni ternyata untuk membuat link berkedip warna warni tidak susah seperti yang saya bayangkan, sangat simpel dan sederhana.

Setelah saya berhasil membuat link berkedip warna warni saya penasaran seperti apa kode scrip yang digunakan karena waktu itu saya menggunakan file scrip yang sudah di upload di google code kodenya seperti dibawah ini :

http://linkpelangialdi.googlecode.com/files/scrip%20link%20warna%20warni.js

Cukup lama saya baru bisa menemukan kode scriptnya, karna penasaran saya terus mencari scripnya dan akhirnya saya temukan scripnya. Saya rasa anda juga ingin tau scripya seperti apa, nanti saya kasih tau scripnya di langkah-langkah membuat link berkedip warna warni.

Waduh jadi kebanyakan ceritani. tapi gk masalah dari cerita diatas bisa ditarik kesimpulan yaitu Apabila anda  sudah berhasil mendapatkan yang anda inginkan jangan berhenti disitu tetapi teruslah mencari hal yang lebih dari itu.

sekarang kita bahas cara membuat link berkedip warna warni. Langkah-langkahnya adalah sebagai berikut :

Langkah pertama : 

1. Download scrip Link warna warni klik disini
Format file sudah saya buat dalam file.js apa bila anda ingin membuat file  Js sendiri scrip nya dibawah ini. yang belum tau caranya membuat file Js dan cara upload di google code silahkan baca disini

/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20)                               */
/* Script updated by Dynamicdrive.com for IE6                           */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki                             */
/* takanasi@hamal.freemail.ne.jp                                        */
/*----------------------------------------------------------------------*/
/* Read it somehow even if my English text is a little wrong! ;-)       */
/*                                                                      */
/* Usage:                                                               */
/*  Insert '<script src="rainbow.js"></script>' into the BODY section,  */
/*  right after the BODY tag itself, before anything else.              */
/*  You don't need to add "onMouseover" and "onMouseout" attributes!!   */
/*                                                                      */
/*  If you'd like to add effect to other texts(not link texts), then    */
/*  add 'onmouseover="doRainbow(this);"' and                            */
/*  'onmouseout="stopRainbow();"' to the target tags.                   */
/*                                                                      */
/* This Script works with IE4,Netscape6,Mozilla browser and above only, */
/* but no error occurs on other browsers.                               */
/************************************************************************/


////////////////////////////////////////////////////////////////////
// Setting

var rate = 20;  // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
//  This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}


//=============================================================================
// stopRainbow
//  This function stops to change a color.
//=============================================================================
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


//=============================================================================
// doRainbowAnchor
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//=============================================================================
// stopRainbowAnchor
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


//=============================================================================
// Change Color
//  This function changes a color actually.
//=============================================================================
function ChangeColor()
{
objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
//  This function makes rainbow colors.
//=============================================================================
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

2. Upload file Js ke google code
3. Copy URL file script yang anda upload di google code tadi paste pada notepad. Contohnya kurang lebih seperti ini.
http://linkpelangialdi.googlecode.com/files/scrip%20link%20warna%20warni.js
4. Selanjutnya rubah Url diatas menjadi seperti ini
<script src='http://linkpelangialdi.googlecode.com/files/scrip%20link%20warna%20warni.js'></script>
5. Copy kode tersebut kemudian

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Chyberart. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Chyberart dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Ѽ҅҅҅҅҅ѽ҃҃҃҃҃҉҃҃҃҃҉҃҃Ѳ长ム从凹Ѽ҅҅҅҅҅ѽ҃҃҃҃҃҉҃҃҃҃҉҃҃Ѳ pada tanggal April 21, 2012