Monday, October 14, 2013

Colorful Flashing Link? WHAAAT?

I don't know if you have noticed but when your mouse hovers over a link it changes colors.
I'll wait for you to check it out if you haven't already.

So you might be wondering how you do that
Well it's quite simple you see, we use something called HTML codes , these codes are used to embed videos, edit blog themes, create pages on the internet etc. So for example if you wanted to have the same cool flashing link thing I have you would have to copy the link below. 

<script type='text/javascript'>
//<![CDATA[
var rate = 50;
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()",100); 
}
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()",100); 
}
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()",100); 
}
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() 
// 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 >= 200) 
elmH = 0;
return '#' + elmR + elmG + elmB; 
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var rate = 50;
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()",100); 
}
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()",100); 
}
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()",100); 
}
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() 
// 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; 
}
//]]>

Yeah I know it's really long.

Now you have to find a way to add this to your blog template so on your blogger dashboard
you'll click the drop down thing next to the document picture
Now you'll click "edit HTML"
Don't get intimidated by all this gibberish you see on this page now, you don't need to mess with that. You just need to paste the html that you copied earlier all the way at the bottom. 
just click save template and then view your blog!








2 comments:

  1. Awesome! Glad you got the gifs in there now. :)

    I tweeted a link to this post so hopefully some others will see it.

    ReplyDelete