Efecto de arcoiris en links al pasar el mouse



Hola chicas  
como se encuentran? estaba un poco inactiva PERDÓN Bueno,vamos a lo importante . Hoy les traigo un tuto de como hacer que sus vínculos o link tengan un un efecto arcoris solo cuando se pasa el mouse por arriba, es tan kawaioso que tal vez lo integre a mi blog

Vamos a PLANTILLA- EDICIÓN HTML, y pega antes de  </head> 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 invar act = 0; // Flag during the actionvar elmH = 0; // Huevar elmS = 128; // Saturationvar elmV = 255; // Valuevar clrOrg; // A color before the changevar TimerID; // Timer IDif (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;elseobjActive = 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>
si quieren denle vista previa antes de guardar, guardan y listo.
Si quieren ver el efecto en a mi Blog de prueba

Eso es todo, espero que les haya gustado n.n, cualquier duda comenten la entrada  :3


si, usas este tutorial, da créditos

4 comentarios:

  1. Hola!!

    yo adoro este efecto! aunque creo que solo se ve en chrome?

    ResponderEliminar
    Respuestas
    1. Lo estaba probando y funciona en Mozilla Firefox e internet explorer :3

      Eliminar
  2. Hola!! Muchas gracias por el tuto!! Me encantó. Bechooo ^3^

    ResponderEliminar