INMA NOS HA HECHO UN COMENTARIO Y PREGUNTABA SOBRE EL CURSOR DE ESTRELLAS ROSAS DEL BLOG. Gracias Inma por escribir, espero que lo que veas por el blog te sirva, porque en definitiva ese es uno de los objetivos del blog, que nos sirva a todos: padres, alumnos y profes. Voy a intentar ir al grano que luego dicen que hablo mucho, cuando hice el blog estuve viendo otros y tomando ideas para el mío. El cursor es una parte dinámica y graciosa del blog, pero no lo quería muy pesado y que luego no me dejase ver en condiciones lo que escribía o ponía. En internet hay webs que te explican como hacerlo una de ellas es http://ciudadblogger.com/2009/12/cursor-con-destellos.html. El cursor lo insertan en el cuerpo del blog, o sea, tienes que entrar en PLANTILLA y luego en EDITAR HTML y seguir los pasos que te dice. ¡¡ATENCIÓN!! si modificas sin querer algo de la plantilla, la puedes liar (por no decir otra cosa) ya que modificas el blog. Si luego no te gusta lo que pones tienes que acordarte de dónde lo has puesto para quitarlo. LO MÁS SENCILLO, por lo menos para mí y es como lo tengo puesto, es usar el GADGET JAVA/HTML. Mi cursor lo tengo así y colocado al final del DISEÑO. En cuanto a los colores de las estrellas puedes cambiarlos. Mira en internet los colores. Que google te lo cuenta todo. Yo te dejo mi cursor con el rosa tal y como está, copias, pegas y listo: ABRES EL GADGET Y EN CONTENIDO PEGAS ESTO, SUERTE:
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* http://www.mf2fm.com/rv *
* NO EDITAR TEXTO MAS ABAJO *
****************************/
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>
Javier, muchísimas gracias. ¿Me puedes facilitar la página donde lo encontraste? No me da opción a ella pero me gustaría cambiar el color de las estrellas, pero ¡ya las tengo! y me encantan. Es una gozada encontrar a personas como tú, con vocación y con la certeza de que solo el conocimiento que se comparte es el que agranda el alma.
ResponderEliminarEstoy en mi último año de carrera y con toda la ilusión.
Muchísimas gracias.
Para cambiar el color de las estrellas ve a esta página: http://www.javascripter.net/faq/rgbtohex.htm. Es un convertidor de colores hexadecimal. Seleccionas o sombreas a partir de la #, copias y lo pegas donde dice colour. He encontrado otra web relacionado con esto: http://www.disfrutalasmatematicas.com/numeros/hexadecimal-decimal-colores.html. Te lo explica muy bien y puedes elegir el color que quieras. Te recuerdo que el código tiene que ser hexadecimal.
EliminarSaludos.