martes, 3 de mayo de 2011

imagen que sigue al cursor

En esta entrada te presentaré un nuevo truco para conseguir que una imagen, un logotipo o un icono siga al cursor, es similar a un cursor tipico en blogger n_n es genial para cuando quieres que el cursor tenga movimiento *.* ya que en blogger a veces es dificil que lo tenga o.O

para que miren que si funciona y q se mira super lindo ^^, da clic en mi blog de pruebas n.n

NOTA: ESTE TRUCO ESTA HECHO SOLO PARA LA PLANTILLA MINIMA OKI !! a mi no me funciono en las otras :(







Diseño>añadir gadget (elemento de página)>html-javascript


y escribes el siguente codigo:

<script type="text/javascript">
//<![CDATA[
var blimgcursor=["URL DE LA IMAGEN", , ]
var blimgespacio=[12,12]
var blimgcursor_cuant=0

if (document.getElementById || document.all)
document.write('<div id="blimgcursorid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+blimgcursor[0]+'"></div>')
function blimgcur_activo(){
if (document.getElementById)
return document.getElementById("blimgcursorid").style
else if (document.all)
return document.all.trailimagid.style
}
function blcentro(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blinvis_img(){
blimgcur_activo().visibility="hidden"
document.onmousemove=""
}
function blimg_curseg(e){
var xcoord=blimgespacio[0]
var ycoord=blimgespacio[1]
if (typeof e != "undefined"){
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=blcentro().scrollLeft+event.clientX
ycoord+=blcentro().scrollTop+event.clientY
}
var docwidth=document.all? blcentro().scrollLeft+blcentro().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(blcentro().scrollHeight, blcentro().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+blimgcursor[1]+3>docwidth || ycoord+blimgcursor[2]> docheight)
blimgcur_activo().display="none"
else
blimgcur_activo().display=""
blimgcur_activo().left=xcoord+"px"
blimgcur_activo().top=ycoord+"px"
}
document.onmousemove=blimg_curseg
if (blimgcursor_cuant>0)
setTimeout("blinvis_img()", blimgcursor_cuant*1000)
//]]>
</script>

para que te salga el iconito asi como el mio debes remplazar la url de la imagen por la direccion del icono o gif que escogiste ^^!!! y para terminar da click en guardar

fuente: el blog de jaime n.n

14 comentarios:

  1. hola, me gusta mucho tu blog^^. querria cambiar mi cursor cn un dibujito, tengo el código pro creo q lo pego en un sitio q no corresponde. m podrias ayudar?
    mi blog es: http://tsukiasiantae.blogspot.com

    gracias

    ResponderEliminar
  2. no encuentro la url de los iconos, no los pusiste va no lo encuentro no s eporqe reemplazar, solo esta la imagen anda mas

    ResponderEliminar
  3. Yo quiero ponerlos en un tumblr y no sé en dónde ponerlos, creo que los puse en un lugar equivocado, tenés idea donde debo ponerlo? gracias!

    ResponderEliminar
  4. nop no tengo ni idea del tumblr o.O sorry

    ResponderEliminar
  5. ESTA GENIAL TU BLOG ANNYZ-CHAN :3 nosostras esk somos nuevas en esto pero gracias a tus tutoriales nos esta kedando super el blog arigatoooooooo

    ResponderEliminar
  6. de nada chicas =D me alegra que les sean de ayuda los tutos ^^

    ResponderEliminar
  7. Me gusto tu truco pero la imagen me queda muy alejada del cursor me podrias ayudar?? gracias :D

    ResponderEliminar
  8. es que este truco es para los que tienen plantilla MINIMA si no lo es la imagen queda de esa manera que te quedo !!

    ResponderEliminar
  9. emmm nueva aqui hehe pero, ¿como es eso de plantilla minima?

    ResponderEliminar
  10. es la plantilla clasica de bloguer no las actuales.!! saludos

    ResponderEliminar
  11. Hola Annyz una pregunta:
    ¿Cómo sería para poner un texto?

    ResponderEliminar
  12. hola cris:

    mira te dejo 2 tutos de este blog que es muy bueno y trae respuesta alo que me preguntas ^^

    http://ciudadblogger.com/2009/03/cursor-con-texto-en-movimiento.html

    http://ciudadblogger.com/2010/02/texto-que-sigue-al-cursor-en-forma.html

    espero te sirvan ^^

    ResponderEliminar
  13. Hola ... sorry .. una pregunta .. trato de poner un nuevo cursor en mi pagina de blogger .. pero no veo ningun cambio .. me AYUDAS????

    ResponderEliminar
    Respuestas
    1. hola luz .. este script es mas bien para las plantillas clasicas.. debi poner una nota xD.. yo re recomiendo los cursores que tengo en la categoria.. cursores para tu blog.. estan bien lindos n.n besos

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.