Efecto de arcoiris en links al pasar el mouse

20 de junio de 2009 48 comentarios ,
rainbow text
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.

Sólo entra a Plantilla | Edición de 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 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>
Así de fácil tendrás un efecto animado en tus links del blog. Puedes ver el resultado pasando el cursor por cualquier enlace o título en este blog de pruebas.


48 comentarios en:

" Efecto de arcoiris en links al pasar el mouse "

  1. Wow! que fácil que nos haces la vida... te has tomado todo el trabajo!!!

    Gracias bro!!!

    Nunca vi un truco tan sencillo. jajaja.

    Un abrazo!!!

    ResponderEliminar
  2. potro....he encontrado una pagina muy buena quisiera que tu hagas un tema en ciudad blogger sobre esa pagina...se que te va a gustar mucho lo que te ofrece la pagina...escribeme:

    pepex_086@hotmail.com

    ResponderEliminar
  3. Brother, creo que es el post más corto que he hecho, hasta pude haberlo mandado por Twitter y hasta me sobraría espacio, jaja.
    Un abrazo.

    ResponderEliminar
  4. Gracias por el dato HP muggle. Mejor le pasaré tu correo a Cyberbloggero, él hace excelentes reviews de otros blogs.
    Saludos.

    ResponderEliminar
  5. Jajajajajaja!!! Esto del mundo Tweeter todavíame supera. jajaja.


    Un abrazo!!!

    ResponderEliminar
  6. Si ta bueno, toy haciendo un nuevo blog y se ve calidad :D http://fase-mor.blogspot.com/ ahora solo me falta aprender algo de flash para hacer una cabecera de blog arrecha jajajaja :(

    ResponderEliminar
  7. Habrá que tomar un curso intensivo de Flash, sólo no interrumpas al maestro cuando hable XD

    ResponderEliminar
  8. Hola... lo probe y me gusto mucho.

    pero se pueden cambiar o elegir los colores que quiero que aparescan en el Link seleccionado??

    Saludos y gracias espero tu respuesta.

    ResponderEliminar
  9. Lamentablemente no, el script toma los colores de una forma "programada".
    Saludos.

    ResponderEliminar
  10. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  11. El comentario anterior ha sido identificado como SPAM y fue eliminado de la entrada.

    ResponderEliminar
  12. Lo hice, mirad como queda de chulo en http://eldiariodel5a.blogspot.com/ !!

    ResponderEliminar
  13. Sencillamente increible y muy vistoso. Me ha encantado y lo deje en mi blog. gracias El Potro

    ResponderEliminar
  14. Me alegra que te haya gustado tanto como a mi :)

    ResponderEliminar
  15. me dice que ets amal por los codigos xml como puedo hacer ?

    ResponderEliminar
  16. Verifica que lo has puesto en el lugar indicado.

    ResponderEliminar
  17. Respuestas
    1. hola potro ^^ tengo una duda, estoy haciendo un menú y quisiera que el hover de los links se vea con un simple color, no con este efecto... ¿se puede desactivar en algunos links? por ejemplo agregando alguna clase o etiqueta?

      Eliminar
    2. No Amiitha, el problema es que el script reconoce a todos los enlaces por igual :(

      Eliminar
  18. Me encanto ;) Lo puse en Cerquita Mio
    Potro ayudame con algo por favor: en el menu de pestañas aparece una linea arriba de los enlaces cuando pasas el cursor, me gustaria si se puede que este debajo en lugar de arriba, sino sacarla. Puede ser? Gracias desde ya por todo lo que haces por mi

    ResponderEliminar
    Respuestas
    1. Debajo no creo, ya que es una imagen gradiente, y la parte de abajo es más clara, por lo que al moverla ahí no se vería casi nada. Si quieres sacarla entonces elimina el background que está dentro de .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { (o algo así)

      Saludos.

      Eliminar
  19. Me gusto demasiado! Joder tio, mi segundo dia en CiudadBlogger y ya tengo todo! Eres un crack El Potro!

    ResponderEliminar
    Respuestas
    1. Qué bueno que te haya gustado tanto como a nosotros :)

      Eliminar
  20. Q guapo y que sencillo. Me encanta tu blog y ya le enlacé.
    Grax

    ResponderEliminar
  21. Gracias Potro, como siempre sorprendiéndome xD
    Saludos!

    ResponderEliminar
  22. Algo ha pasado con los archivos alojados en dropbox. Me desapareció los links en colores, pero ahora aparece el cursor con estrellitas. ¿A que crees que pueda deberse esto?. Saludos

    ResponderEliminar
    Respuestas
    1. Quizá se cayó por un momento Dropbox, yo no lo noté, pero al menos mis archivos parecen estar funcionando bien.

      Eliminar
    2. acaba de dejar de funcionarme D: se solucionará? me encanta lo del efecto arcoiris xc <3

      Eliminar
    3. El enlace está funcionando, quizá sea un cambio que realizaste en la plantilla:
      http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js

      Si lo prefieres puedes subir el archivo a tu propio alojamiento.

      Eliminar
  23. Funciona bien, gracias a todo tu tiempo has ayudado a mejorar mi blog :).
    Salu2.

    ResponderEliminar
  24. gracias me ha servido de mucho en mi nuevo blog :)

    ResponderEliminar
  25. MUCHÍSIMAS GRACIAS ESTÁ PADRÍSIMOOOOO PUEDES VER COMO LO COLOQUE EN MI BLOG centroesotericoymisticoluzgitana.blogspot.mx GRACIAS POR AYUDAR!!!

    ResponderEliminar
  26. Como puedo quitar ese efecto, no me gusta... ademas yo no lo he puesto?

    ResponderEliminar
    Respuestas
    1. Busca en tu plantilla un código como el de esta entrada y elimínalo.

      Eliminar
  27. Hola Potro, quisiera preguntarte porque dejo de funcionar este truco. Yo estaba editando mi blog, pero ya tenia implementado este truco... Y de un momento al otro dejo de funcionar, sabes porque? No hice ningun cambio en los codigos para insertarlo, nose que sera. Porfavor, espero tu respuesta muy atentamente. Espero me ayudes!!!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger