Hover Link Pelangi: Cara Buat dan Pasang Rainbow Link Effects

Karena desain hover link CSS mempunyai banyak keterbatasan, maka untuk mendapatkan hover link yang lebih menarik dan atraktif banyak diciptakan hover link dalam bentuk script dengan menggunakan javascript. Kelemahan mendasar penggunaan hover link menggunakan javascript adalah dalam hal kompabilitinya, dimana tidak semua javascript yang digunakan kompatibel dengan browser yang ada. Salah satu Hover link yang begitu terkenal dilingkungan blogger adalah "Hover Link Pelangi" atau "Rainbow Hover Link" yang diciptakan oleh TAKANASHI Mizuki.

Javascript Hover Link Pelangi (Rainbow Link Effects)

Javascript Hover Pelangi

<script type="text/javascript">
///* http://mitrabarayaonline.blogspot.com */
/* Rainbow Links Script- TAKANASHI Mizuki */
var rate = 20;  // Increase amount(The degree of the transmutation)
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;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",150);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
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()",150);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
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()",150);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
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;
}
//]]>
</script>

Cara Membuat dan Memasang Javascript Hover Link Pelangi

1. Lakukan pengamanan template terlebih dahulu dengan cara :
   
   - Login ke Blogger
   - KLIK Tata letak
   - KLIK Edit HTML
   - KLIK Download Template Lengkap
   - Simpan di Folder PC
2. Tetaplah di Edit HTML.
   
   - Edit HTML
   - Cari KODE ]]></b:skin>
   - Copy Javascript :
   Letakkan persis di bawah ]]></b:skin>
   - KLIK Simpan Template
   - Lihat hasilnya di blog

Catatan/Keterangan :

• Supaya KODE lebih ringkas UPLOAD javascript di filehosting.
• Ambil URL-nya dan tempatkan URL seperti KODE di bawah ini :
  
  <script type="text/javascript" src="URL"></script>

Contoh penempatan javascript

]]></b:skin>

<script type="text/javascript" src="https://shannenpio-template.googlecode.com/svn/mitrabaraya_rainbow-hover-effect.js"></script>

Link javascript dari google code di atas bisa langsung anda gunakan. Segeralah membuat dan coba lihat hasilnya seperti apa?!

Contoh link untuk percobaan bisa gunakan yang berikut:

Contoh bentuk kode html link.

<a href="http://mitrabarayaonline.blogspot.com" target="_blank" title="Percobaan hover link pelangi.">
Hover Link Pelangi
</a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PAHING, January, 30, 2012

» Happy Blogging - mitrabaraya «