Con un script vamos a dar un efecto de arcoiris al pasar el mouse sobre los links. Este efecto se aplica para todos los links que tengas en el blog.
Para poder integrarlo en vuestro blog, vamos a Plantilla, Editar HTML y buscamos </head>, antes pegamos esto: <script> //<![CDATA[ /************************************************************************/ /* 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 */ /************************************************************************/ 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()",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(){ 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>
Con ese script, podrás hacer que todos los links de tu blog tengan ese efecto, puedes ver mejor como funciona este efecto en este blog de pruebas.
Vía / Ciudadblogger
9 comentarios
Ana · noviembre 2, 2013 a las 12:01 am
Se ve bien en mi blog muchas gracias
Jonathan LR · noviembre 2, 2013 a las 2:06 pm
Gracias por comentar Ana
Laura · diciembre 29, 2013 a las 3:58 pm
En mi blog no sale head si lo pongo en header seria lo mismo?
Hayder Juvinao · enero 4, 2014 a las 3:54 pm
Debe salir ya que toda plantilla tiene esa etiqueta
Saludos
Anass Essouabni · marzo 3, 2014 a las 1:58 pm
xD AMI ME FUNCIONA
Hayder Juvinao · marzo 13, 2014 a las 12:27 am
Anass que bueno que te funcione
kevin hernandez · abril 15, 2014 a las 8:10 pm
ALGUIEN ME PUEDE DECIR COMO HACER UN CUADRO Y PONER UN CODIGO DENTRO
Hayder Juvinao · abril 21, 2014 a las 4:33 pm
Kevin que es lo que quieres, porque no te entiendo?
Saludos
DemianRC · septiembre 20, 2014 a las 3:24 am
Muchas gracias por entregarnos esto
Se ve espectacular en mi blog n_n