sábado, 20 de agosto de 2011
Link Arco-Iris
Dê um colorido legal em seus links no blog, adicionando um efeito arco-iris nos links, usando javascript.
Com este efeito, ao passarmos o mouse em cima do link, ele muda de cor, proporcionando um visual de cores simultâneas, bem atraente.
Quer ver como adicionar este efeito?
Vá em Layout >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de </head>
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if undefineddocument.getElementById)
window.onerror=new Functionundefined"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 undefineddocument.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if undefineddocument.getElementById) {
document.captureEventsundefinedEvent.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbowundefinedobj)
{
if undefinedact == 0) {
act = 1;
if undefinedobj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
function stopRainbowundefined)
{
if undefinedact) {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
function doRainbowAnchorundefined)
{
if undefinedact == 0) {
var obj = event.srcElement;
while undefinedobj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if undefinedobj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if undefinedobj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}
function stopRainbowAnchorundefined)
{
if undefinedact) {
if undefinedobjActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchorundefinede)
{
if undefinedact == 0) {
obj = e.target;
while undefinedobj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if undefinedobj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if undefinedobj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setIntervalundefined"ChangeColorundefined)",100);
}
}
}
function Mozilla_stopRainbowAnchorundefinede)
{
if undefinedact) {
if undefinedobjActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearIntervalundefinedTimerID);
act = 0;
}
}
}
function ChangeColorundefined)
{
objActive.style.color = makeColorundefined);
}
function makeColorundefined)
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if undefinedelmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = undefined255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = undefinedt1 - t2) * t3 / 60;
if undefinedelmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if undefinedelmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if undefinedelmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if undefinedelmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if undefinedelmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if undefinedelmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floorundefinedelmR).toStringundefined16);
elmG = Math.floorundefinedelmG).toStringundefined16);
elmB = Math.floorundefinedelmB).toStringundefined16);
if undefinedelmR.length == 1) elmR = "0" + elmR;
if undefinedelmG.length == 1) elmG = "0" + elmG;
if undefinedelmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if undefinedelmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>
