Foros del Web » Creando para Internet » HTML »

Seguir al puntero

 Estas en el tema de Seguir al puntero en el foro de HTML en Foros del Web. Disculpen de nuevo, como le puedo hacer para que una leyenda o una imagen persiga al puntero del raton por toda la pagina sin utilizar ...
  #1 (permalink)  
Antiguo 23/04/2002, 23:36
 
Fecha de Ingreso: abril-2002
Mensajes: 11
Antigüedad: 22 años, 7 meses
Puntos: 0
Seguir al puntero
Disculpen de nuevo, como le puedo hacer para que una leyenda o una imagen persiga al puntero del raton por toda la pagina sin utilizar flash.

Gracias.
  #2 (permalink)  
Antiguo 24/04/2002, 01:38
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
¡ Hola korn nuevamente !

Creo que hoy dia saliste premiado con mi repetitiva participacion en tus post .

Bromas aparte..Aqui te voy a insertar algunos parametros que te van a servir y puedas deshacer y rehacer a tu gusto.

Sugerencia:

Ten cuidado con que motivo de paginas trabajas (Diseño, orientacion o especialidad) pues lamentablemente hay personas que solo colocan estos efectos porque les parece muy bonito, pero malogran la estetica del trabajo de la pagina y peor aun, dificultan o molestan demasiado al usuario en su navegacion, conozco a mas de un usuario que no ha vuelto a determinadas Web, por la obstinacion del diseñador en insistir en su mal gusto o su poco respeto por sus usuarios.
creo que es una sana sugerencia.

Bueno pues alli te dejo los parametros.

¡Suerte!
  #3 (permalink)  
Antiguo 24/04/2002, 01:40
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
Esta es la #1



Esto va entre <HEAD> y </HEAD>



[I]<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
<script>


var x,y
var step=20
var flag=0

// Your snappy message. Important: the space at the end of the sentence!!!
var message="VISITA MIWEB.COM!!!! "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos
}
}
var timer=setTimeout("makesnake()",30)
}

</script>


__________________________________________________


ESTO VA ENTRE <BODY> y </BODY>

[I]<script>
<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message)
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>




Y esto en el tag:

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll" >



  #4 (permalink)  
Antiguo 24/04/2002, 01:42
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
Esta la #2


Cursor Scroller



ESTO VA ENTRE <BODY> y </BODY>



<SCRIPT language="JavaScript1.2">
<!--

/*
Cursor scroller script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/

//1) set message to display
var scroller_msg='Welcome to Dynamic Drive, the premier DHTML code library online!'
//2) set whether message should auto disappear after x seconds (0=perpetual).
//Note that double clicking page will also dismiss message
var dismissafter=0

var initialvisible=0
if (document.all)
document.write('<marquee id="curscroll" style="position:absolute;width:150px;border:1 px solid black;font-size:14px;background-color:white;visibility:hidden">'+scroller_ msg+'</marquee>')

function followcursor(){
//move cursor function for IE

if (initialvisible==0){
curscroll.style.visibility="visible"
initialvisible=1
}

curscroll.style.left=document.body.scrollLeft+even t.clientX+10
curscroll.style.top=document.body.scrollTop+event. clientY+10
}

function dismissmessage(){
curscroll.style.visibility="hidden"
}


if (document.all){
document.onmousemove=followcursor
document.ondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissaft er*1000)
}



//-->
</SCRIPT>

__________________________________________________ _____



Y esto en el tag:




<BODY style="width:100%;overflow-x:hidden;overflow-y:scroll" >



  #5 (permalink)  
Antiguo 24/04/2002, 01:43
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
Esta la #3



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<p><a href="http://www.astalavista.com/hub/scripts/archive_cursoreffects/mousetrail4.asp">BACK</a></p>
<p> </p>
<p> </p>
<p> </p>
<div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>
<div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="bullet.gif" height=11 width=11></div>

<script LANGUAGE="JavaScript">
<!-- hide code



// Thanks to Troels Jakobsen <[email protected]>
// for fix which makes it work when the page is scrolled

var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[I] = new dot(i);
}

if (!isNetscape) {
// I only know how to read the locations of the
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}

// set their positions
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}


if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 2000);
}
}



function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}


function startanimate() {
setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}

if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
this.X = X;
this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}


function animate() {
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}

for (i = start ; i < nDots; i++ ) {

var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}

// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);

// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/ MASS,
(spring.Y + resist.Y)/ MASS + GRAVITY);

// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);

// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}

// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;

// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}

// bounce of 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}

// move img to new position
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots.Y;
}
}

// end code hiding -->
</script>

</body>
</html>
  #6 (permalink)  
Antiguo 24/04/2002, 01:44
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
Esta la #4





<html>
<head>
<title>Cursor 6</title>
</head>
<body>
<script>
B=document.all;
C=document.layers;
T1=new Array("carita.gif",36,35)
nos=parseInt(T1.length/3)
rate=50
ie5fix1=0;
ie5fix2=0;
for (i=0;i<nos;i++){
createContainer("CUR"+i,i*10,i*10,i*3+1, i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}
function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){
with (document){
write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");
if(St){
if (C)
write(" style='");
write(St+";' ")
}
else write((B)?"'":"");
write((At)? At+">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer(){
document.write((B)?"</div>":"</layer>")
}
function getXpos(N){
return (B) ? parseInt(B[N].style.left) : C[N].left
}
function getYpos(N){
return (B) ? parseInt(B[N].style.top) : C[N].top
}

function moveContainer(N,DX,DY){
c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
}
function cycle(){
if (document.all&&window.print){
ie5fix1=document.body.scrollLeft;
ie5fix2=document.body.scrollTop;
}
for (i=0;i<(nos-1);i++){
moveContainer("CUR"+i,getXpos("CUR& quot;+(i+1)),getYpos("CUR"+(i+1)))
}
}
function newPos(e){
moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.c lientY+ie5fix2:e.pageY+2
)
}
if(document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=newPos
setInterval("cycle()",rate)
</script>

</body>
</html>
  #7 (permalink)  
Antiguo 24/04/2002, 01:49
 
Fecha de Ingreso: marzo-2002
Mensajes: 257
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero

Bueno...y desde la #5 hasta la # 654 esas solo las vendo..

En verdad creo que ya tienes para hacer y deshacer a tu regalada gana, ojala sean para ti lo que estabas buscando.

¡Y no hay de que, para eso estamos!! ;)

PD: Y los amigos "Flasheros" que no se me molesten, ademas este es el foro de HTML

¡Fuerte abrazo!!
  #8 (permalink)  
Antiguo 26/04/2002, 00:35
 
Fecha de Ingreso: abril-2002
Mensajes: 11
Antigüedad: 22 años, 7 meses
Puntos: 0
Re: Seguir al puntero
Muchas gracias Chacal, todavia no los pruebo pero de te aseguro que de algo me serviran y gracias por los consejos, los tomare en cuenta.
:)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:38.