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:
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>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.
//<![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>
Wow! que fácil que nos haces la vida... te has tomado todo el trabajo!!!
ResponderEliminarGracias bro!!!
Nunca vi un truco tan sencillo. jajaja.
Un abrazo!!!
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:
ResponderEliminarpepex_086@hotmail.com
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.
ResponderEliminarUn abrazo.
Gracias por el dato HP muggle. Mejor le pasaré tu correo a Cyberbloggero, él hace excelentes reviews de otros blogs.
ResponderEliminarSaludos.
cvr ok....
ResponderEliminarJajajajajaja!!! Esto del mundo Tweeter todavíame supera. jajaja.
ResponderEliminarUn abrazo!!!
Ya somos dos
ResponderEliminar=)
wao gracias :D esta perfecto :D
ResponderEliminarQué bueno que te gustó :)
ResponderEliminarSi 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 :(
ResponderEliminarHabrá que tomar un curso intensivo de Flash, sólo no interrumpas al maestro cuando hable XD
ResponderEliminarHola... lo probe y me gusto mucho.
ResponderEliminarpero se pueden cambiar o elegir los colores que quiero que aparescan en el Link seleccionado??
Saludos y gracias espero tu respuesta.
Lamentablemente no, el script toma los colores de una forma "programada".
ResponderEliminarSaludos.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEl comentario anterior ha sido identificado como SPAM y fue eliminado de la entrada.
ResponderEliminarLo hice, mirad como queda de chulo en http://eldiariodel5a.blogspot.com/ !!
ResponderEliminarQué bueno que te ha gustado :)
ResponderEliminarGrax!!
ResponderEliminarMuchas gracias ¡
ResponderEliminarSencillamente increible y muy vistoso. Me ha encantado y lo deje en mi blog. gracias El Potro
ResponderEliminarMe alegra que te haya gustado tanto como a mi :)
ResponderEliminaresta super (:
ResponderEliminarme dice que ets amal por los codigos xml como puedo hacer ?
ResponderEliminarVerifica que lo has puesto en el lugar indicado.
ResponderEliminarqueda hermoso =)
ResponderEliminar¿Verdad que sí? :)
Eliminarhola 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?
EliminarNo Amiitha, el problema es que el script reconoce a todos los enlaces por igual :(
EliminarMe encanto ;) Lo puse en Cerquita Mio
ResponderEliminarPotro 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
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í)
EliminarSaludos.
Me gusto demasiado! Joder tio, mi segundo dia en CiudadBlogger y ya tengo todo! Eres un crack El Potro!
ResponderEliminarQué bueno que te haya gustado tanto como a nosotros :)
EliminarQ guapo y que sencillo. Me encanta tu blog y ya le enlacé.
ResponderEliminarGrax
Gracias a ti Juan, saludos.
EliminarGracias Potro, como siempre sorprendiéndome xD
ResponderEliminarSaludos!
aludos Ruru :)
EliminarGracias!!! muy lindo efecto...
ResponderEliminarAlgo 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
ResponderEliminarQuizá se cayó por un momento Dropbox, yo no lo noté, pero al menos mis archivos parecen estar funcionando bien.
Eliminaracaba de dejar de funcionarme D: se solucionará? me encanta lo del efecto arcoiris xc <3
EliminarEl enlace está funcionando, quizá sea un cambio que realizaste en la plantilla:
Eliminarhttp://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/rainbowlinks.js
Si lo prefieres puedes subir el archivo a tu propio alojamiento.
Funciona bien, gracias a todo tu tiempo has ayudado a mejorar mi blog :).
ResponderEliminarSalu2.
Gracias a ti por tu visita!
Eliminargracias me ha servido de mucho en mi nuevo blog :)
ResponderEliminarMUCHÍSIMAS GRACIAS ESTÁ PADRÍSIMOOOOO PUEDES VER COMO LO COLOQUE EN MI BLOG centroesotericoymisticoluzgitana.blogspot.mx GRACIAS POR AYUDAR!!!
ResponderEliminarComo puedo quitar ese efecto, no me gusta... ademas yo no lo he puesto?
ResponderEliminarBusca en tu plantilla un código como el de esta entrada y elimínalo.
EliminarHola 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