Colocar efecto multi-color en los enlaces en Blogger

Colocar efecto multi-color en los enlaces en Blogger

Alberto Lozano 5 / marzo / 2011 Blogger 9 comentarios    4 visitas
Publicidad

Hace un tiempo que ya no publicaba sobre Blogger, y este es el caso que me encontré este excelente script, que da efecto en los enlaces (links, vínculos) se vean tipo arcoíris (multi-color) al pasar el mouse por encima de ellos, no es nada del otro mundo, es tan fácil colocarlo.

Para que se den una idea de como quedaría, chequen este Blog de pruebas 🙂

Primero nos vamos a Diseño > Edición de HTML y buscamos el siguiente código:

</head>

Una vez localizado, justo antes de </head> pegamos lo siguiente:

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

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

//]]>

</script>

Antes de guardar podemos modificar var rate = 20 es para asignarle la velocidad de los cambios de color en los enlaces. Si no entiendes bien que es, no importa así como esta se ve de lujo.

Ahora solamente le damos a guardar plantilla y listo.

Publicidad

9 Comentarios en 'Colocar efecto multi-color en los enlaces en Blogger'

  • abril 11, 2011
    nana:

    Me aparece que mi cod esta mal… podria ayudarme?

    Responder
    • abril 11, 2011
      Alberto:

      @nana: Lo volví a intentar el efecto al blog de pruebas y está funcionando a la perfección, revisa bien que hayas copiado completo todo el código y pegado en tu plantilla, saludos!

      Responder
  • junio 10, 2011
    Ana:

    A mi tampoco me permite… 🙁

    Responder
    • junio 10, 2011
      Alberto:

      @Ana: Como que no te permite :/ si yo lo veo perfectamente en tu Blog. Saludos!

      Responder
  • junio 10, 2011
    Ana:

    Sí, pero cogí el código de otra página… :-/ Por eso están ya los enlaces multicolor.

    Responder
    • junio 10, 2011
      Alberto:

      @Ana: Tienes razón, no había cerrado bien un código, ya lo arregle 🙂

      Responder
  • junio 10, 2011
    Ana:

    Jeje 🙂 A veces cualquier fallo, por pequeño que sea, arruina cualquier proyecto jeje…
    Gracias

    Responder
  • septiembre 15, 2011
    Florentino Menéndez:

    Lo he hecho (con mucho miedo) y me ha salido a la primera, incluso he cambiado la velocidad de destello. Gracias, queda muy bien y siguiendo las instrucciones al pie de la letra es fácil.

    Responder
    • septiembre 16, 2011
      Alberto:

      @Florentino Menéndez: Siempre hay que arriesgarse para aprender, pero por otro lado que bueno que lo intentaste y te quedo bien en tu Blog 🙂 Saludos!

      Responder

Deja tu comentario

  • Nombre:
    E-mail:
    URL: (opcional)