2 ago. 2010

Cursor con Brillo

Por aquii respondiendo una pregunta de nuestra amiga Kappiih sobre Cómo poner el efecto en el cursor de Brillo cayendo.
Esto es muy simple, sólo deben colocar este código en la plantilla, entre
<head></head> o después de ]]></b:skin> y listo!!
Nota: Para cambiar el color lo deben realizar en la parte de color rojo, donde dice var colour="coloca aqui el color que desees", puse el color predeterminado como rosado claro, como el que tengo puesto en el blog. Espero que les sirva!




<script type='text/javascript'>
// <![CDATA[
var colour="#FBBDDB";
var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>




44 comentarios:

  1. GRACIAS GRACIAS!!! Me encanto, y me salio las instrucciones son muy buenas!! jejejeje
    muchas muchas gracias!!!!

    ResponderEliminar
  2. Hola!!esta es la primera vez q visito tu blog y me gusto mucho y quisiera hacer lo del cursor con brillo, pero como apenas voy empezando con todo esto de blogspot no entiendo algunas cosas como qué codigo,en donde y como lo tengo q poner?

    por favor ayudame, porq me gustaria que mi blog fuera mas lindo ^^

    ResponderEliminar
  3. Hola Misakii!!..te respondo la duda..
    Resulta que cuando ingresas al blog sale el escritorio de blog donde sale nueva entrada, configuración, diseño, etc. Te vas a diseño y busca en las opciones Edición en HTML y te va a salir la plantilla con varios códigos, pulsas en el teclado Ctrl+f y te va a salir una ventanita pequeña y en esa introduces los códigos de head o de skin (que puse con anterioridad), esto es para facilitar la búsqueda y cuando lo tengas pegas el código (el código que es bien extenso xD) antes o después de aquella palabra.

    Espero que te haya quedado claro, sino me avisas para explicarte de nuevo y ayudarte..no tengo problemas...
    Muchas gracias por tu visita


    Kapiih graciiias por tus comentarios y tus visitas!! eres un amor :)

    ResponderEliminar
  4. gracias andy!!
    ojala my blog quede tan lindo como el tuyo ^^ y si es asi sera por toda tu ayuda,ojala luego te puedas dar una vueltecita por mi blog,solo recuerda q voy empezando asi q no esperes la gran cosa :D este es el link http://misanimesshojo.blogspot.com/

    otra vez, gracias por tu ayuda.
    bye ^^

    ResponderEliminar
  5. Oh! estaba buscando esto.
    Muchas gracias, le quedó muy lindo al blog

    ResponderEliminar
  6. :s excelente Andy-chan! siempre colocando cosas interesantes!!....Trataré de ser mejor tamién xD

    ResponderEliminar
  7. Muchísimas gracias :a
    este blog es muy lindo y útil para las niñas como yo amantes de lo kawaii pero principiantes :d xDD
    otra vez gracias :f

    Saludos!

    ResponderEliminar
  8. Gracias por sus comentarios...trabajos para hacer las cosas sencillas :m

    ResponderEliminar
  9. Aún no comprendo muy bien. No entiendo donde poner el código. :d Por favor explícame.
    :c

    ResponderEliminar
  10. Pinguinitaty respondo tu duda:

    Ingresas diseño y busca en las opciones Edición en HTML luego apretas Ctrl+f y te va a salir una ventanita pequeña y en esa introduces los códigos de head o de skin (que puse con anterioridad de color rosa) antes o después de aquella palabra.
    recuerda color vista previa para ver si no ocurrio ninguna modificacion extraña en plantilla....espero que te sirva...me avisas que parte no entiendes.... :a

    ResponderEliminar
  11. Quizás ahora comprendo. :c
    Pero una pregunta más :e ...
    Es que he visto en tu blog, dos partes donde la imagen sale como con un fondo transparente encima y al pasar el cursor vuelve a su color normal y al alejarlo vuelve como antes.
    Por ejemplo:
    La imagen que dice Especial Navidad
    O el menú de arriba.
    :f Esa es mi duda. :c

    ResponderEliminar
  12. Ese truco lo puedes hacer de la siguiente manera:

    <a class="opacidad" href="URL DE LA DIRECCIÓN" src="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN"" /></a>


    Y LISTO!...éxitoo

    ResponderEliminar
  13. Holis!! Primero: me encanta tu blog! util, lindo, divertido, me encantaaa!! =D
    Una pregunta: como puedo ponerle otro color al brillito?, pusiste que despues de "tal" codigo; ..por ejemplo yo quiero ponerlo rojo, pero como sé cual es el codigo del color rojo, porque para que sea rosado es #FBBDDB, y para que sea rojo sabes cual es?, o sabes en donde o como puedo saberlo? =)..Mil Gracias por todo ^^ ..Nos vemos, cuidate y besitos ^^

    ResponderEliminar
  14. Los colores los puedes ver aqui

    http://shojodecora.blogspot.com/search/label/Tabla%20de%20Colores

    :t

    ResponderEliminar
  15. Wuauu!! Mil Gracias ^^!! espero que alguna vez te pases por mi blog ^^:http://www.kathya-animesromanticos.blogspot.com/ (aunque recién estoy arreglandolo y no se mucho como hacerlo jajjajaja)
    PD: me gustó mucho como dejaste el blog, un gran cambio de rosa a este color, sin embargo te quedó muy muy lindo =D..te estaré visitando (el blog xD)..Nos vemos!! =)

    ResponderEliminar
  16. Hola. hace una semana vi tu blog y me gusta y me hice un blog yo tambien. me gustaria que te pases y si podes.. tambien seguirme :) seria genial. adoro tu blog y de aca saco muchos tips y cositas para personalizar mas mi blog. un saludo.

    Flor. :)
    Blog: florbran.blogspot.com

    ResponderEliminar
  17. Hola , como estas? mira.. caundo quiero copiar el código que pusiste no puedo seleccionarlo :S me ayudarias?

    ResponderEliminar
  18. Holii holii :3
    Pregunta: funciona tmb con las plantillas clasicas? xq a mi no me sale T^T
    control c no esta activado en este blog asiq me tuve que copiar enterito el codigo y no me salio T^T help!!

    ResponderEliminar
  19. Hola Kiry Kawaii!!..te respondo tu pregunta:

    Si funciona en las plantillas clásicas y no he activado el control+c debido a los plagios que sufre el blog, perdón por la incomodidad.
    Te dejo el código más abajito...Gracias por tu visita

    ResponderEliminar
  20. Lo pondré en 2 partes porque el comentario no me lo deja publicar...pero es todo junto...

    <script type='text/javascript'>
    // <![CDATA[
    var colour="#FBBDDB";
    var sparkles=40;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);}
    set_width();
    sparkle();}}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }

    ResponderEliminar
  21. else {
    sdown=0;
    sleft=0;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>

    ResponderEliminar
  22. Salen algunos monos de los comentario.....pero acabo de probar y funciona el Control+C y lo que no habilité fue el boton derecho del mouse....intentalo...Gracias

    ResponderEliminar
  23. quiero poner ese monito en una entrada de mi blog, como puedo hacerlo?

    ResponderEliminar
  24. Eso del cursor no me funciona, no puedo copiar el código :(

    ResponderEliminar
  25. tambien tengo otra pregunta (sorry, peor no se hacer mucho en esto de blog), pero como puedo hacer para que la imagen se vea como "transparente" y que luego al colocar el raton sobre ella se "oscurezca"?

    ResponderEliminar
  26. Ya estan los códigos habilitados

    ResponderEliminar
  27. Hola!!!
    Me preguntaba si este codigo funcionaba tambien para Livejournal?
    *w* me gustaria ponerle brillitos
    Saludos

    ResponderEliminar
  28. Muchísimas gracias, me ha servido de mucha ayuda, y además lo explicas de una forma que se entiende a la perfección y muy claro todo. GRACIAS (L)

    ResponderEliminar
  29. me encanto!!
    no lo puedes poner para pc
    te lo agradeceria mucho
    graciias

    ResponderEliminar
  30. No me funciona :c
    me podrias ayudar?

    ResponderEliminar
  31. SIRVE PARA CUALQUIER BLOG? COMO TUMBLR?

    ResponderEliminar
  32. Constanza, me gusto mucho tu blog, pero no entiendo como hacerle para que al pasar el curosr sobre todas las imagenes se oscuresca o se aclare, pues soy nuevo en los blogg, ..saludos Luis

    ResponderEliminar
  33. Hola buenas! :P
    Intento poner el código y todo y me pone esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The markup in the document following the root element must be well-formed.

    Error 500

    Que puedo hacer?

    ResponderEliminar
  34. hola soy nueva en el tema de los blog y me encantaria poner el cursor cn brillo en mi blog, pero llego hasta la parte de abrir la ventana pequeña y al lado sale en rojo 0/0 o le poongo enter o guardar ya estando el codigo y sigue sin pasar nada no entiendo mucho del tema me podrias ayudar cn este problema te lo agredeceria mucho :D bueno cuidate espero la respuesta.

    ResponderEliminar
  35. no puedoooooooooooooooooooooo :( no me sale o lo estoy haciendo mal alguien me ayuda??

    ResponderEliminar
  36. oiie yo soy nueva y no se mucho ni se donde encontrar head

    ResponderEliminar
  37. muchas gracias por tus consejos para que nuestro blog se pueda ver mejor

    ResponderEliminar
  38. OMG!!!!!! jksdfiosjosjvjsdgjsndfs Me encantó Muchísimas gracias♥

    ResponderEliminar
  39. Muchas gracias, me sirvió perfectamente ^^

    ResponderEliminar
  40. como hago para ponerle mas colores a las chispas?

    ResponderEliminar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
ir arriba