cara membuat text link berkelip kedip saat di klik

Untuk pertemuan kali ini saya akan memberikan tutorial javascript lagi, yaitu cara membuat teks link berkedip kedip / berkelip saat link di klik.. wah pasti pada bingung gimana nih maksudnya... tenang... kebetulan saya melihat ada web blog yang mempergunakan javascript ini, kalo anda ingin melihat contonya silahkan klik disini . nah di webblog tersebut saat mouse anda letakkan di salah satu linknya pasti link akan berubah menjadi berkedip kedip / berkelip kelip. Gimana..? udah tau kan yang saya maksud..?
Ok.. sekarang saya akan melanjutkan lagi ke pembahasan.. scipt ini dinamakan dengan scipt RAINBOW ( RANBOW SCRIPT ) yang mana pembuatan script ini menggunakan bahasa pemprogaman berbasis JAVASCRIPT dan telah di publikasikan oleh web tool www.Dynamicdrive.com, kalo anda ingin mencari bermacam script javascript lainnya yang aneh aneh.. silah langsung aja anda kunjungi websitenya.. pasti di jamin ga bakaln bosen ngadepin websitenya.. coz, banyak sesuatu yang menarik disana...
Gimana..? masih mau scriptnya..? masih dunk... hehehe.. ok.. langsung aja akan saya kasih script nya..
Disni saya akan memeberikan scriptnya dan saya bagi menjadi 2 macam, yaitu scrip yang sudah mateng / sudah siap pake alias tinggal masang di blog anda dan script yang masih mentah alias musti di upload dulu ke website uploader / website file hosting dan yang pasti yang gratisan dunk... hehehe...
Jika anda pengen langsung bisa menggunakan scriptnya.. silahkan pakai aja script yang sudah saya upload di web file hosting dan tugas anda tinggal memasangkan di blog anda yaitu dengan cara copy lalu paste di editor HTML blog anda dan taruh tepat di atas kode </body> :

<script src='http://h1.ripway.com/ekhan/rainbow.js'></script>

Kemudian tekan tombol SAVE / SIMPAN ... ( lihat hasilnya... )

Dan jika anda masih belum puas dengan script yang sudah jadi diatas saya akan memberikan script mentahannya ( siapa tau kapan2 alamat file JS yang saya berikan di atas ga bisa di access lagi, maka anda bisa mengupload script dibawah ini )


/************************************************************************/
/* 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;
}


Copy script diatas kemudian paste kedalam notepad / sejenisnya lalu simpan file tersebut dalam format JS (javascript) sebagai contoh : anda simpan dengan nama RAINBOW.JS ( pokoknya di belakang nama file berekstensi ( .js ) tanpa tanda kurung )
kemudian upload file tersebut ke web file hosting yang anda punya, ( web file hosting rekomend : www.geocities.com , www.googlepages.com , www.ripway.com , dll )
Setelah anda upload file js tersebut sekarang anda membuat script perintah pemanggilan file js tersebut, yaitu seperti ini :

<script src='http://alamat-file-hosting-anda/contoh.js'></script>

kemudian taruh script yang barusan anda buat tadi tepat di atas code </body>

kemudian tekan tombol SAVE / SIMPAN dan lihat hasilnya....

udah begitu aja.... mudah kan...?
kalo masih ada yang bingung silahkan tanyakan aja yah.. moga aja sih ga da masalah dengan hal ini... selamat mencoba dan semoga sukses...

Posted by ayiek

Tweet