UN JAVASCRIPT A LA SEMANA: mousetrace con efecto rastro 1/2

Mousetrace con rastro ^1/2

semana 68 - 22 mayo 2000

Volvamos nuevamente al efecto mousetrace, es decir, objetos que siguen al cursor del ratón por una página. Hablamos ya del tema profusamente en el número:

http://www.htmlpoint.com/mailing/archivo/51/index.html

y retomamos la cuestión la semana pasada.
El script de esta semana es una variante de lo ya mostrado en los dos script precedentes y adopta una solución gráfica muy interesante. El ejemplo muestra imágenes que siguen al ratón con un efecto gráfico similar a los clásicos cursores de nuestros sistemas operativos. Cuando se para, además, la imagen desaparece para volver a aparecer cuando el ratón se pone de nuevo en movimiento.

El ejemplo consta de 7 file:

imagen1.gif - la imagen más grande.
imagen2.gif - la segunda imagen más grande.
imagen3.gif - la tercera imagen más grande.
imagen4.gif - la cuarta imagen.
imagen5.gif - la imagen más pequeña.
trasparente.gif - una imagen con único color transparente
esempio.htm

Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

esempio.htm

Las imágenes tienen que tener todas exactamente las mismas dimensiones. En el ejemplo hemos creado imágenes de 36x28 píxel, y lo que varía es el contenido. Es importante que las imágenes, si no ocupan toda la superficie, tengan un color de fondo transparente. Sólo de esta manera no cubrirán las demás imágenes.

Una vez creadas las 5 imágenes, pasamos a impostar el código entre los elementos <HEAD> de la página:

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

var isNS = (navigator.appName == "Netscape");
layerRef = (isNS) ? "document" : "document.all";
styleRef = (isNS) ? "" : ".style";

var queue = new Array();

var NUM_OF_TRAIL_PARTS = 5

for (x=1; x < 6; x++) {
	eval("trailSpriteFrame" + x + " = new Image(28,36);");
	eval("trailSpriteFrame" + x + ".src = 'immagine" + x + ".gif';");
}

function trailSpriteObj(anID) {
	this.trailSpriteID = "trailSprite" + anID;
	this.imgRef = "trailSprite" + anID + "img";
	this.currentFrame = 1;
	this.animateTrailSprite = animateTrailSprite;
}

function processAnim() {
	for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
			queue[x].animateTrailSprite();
}

function shuffleQueue() {
	lastItemPos = queue.length - 1;
	lastItem = queue[lastItemPos];
	for (i = lastItemPos; i>0; i--) 
		queue[i] = queue[i-1];
	queue[0] = lastItem;
	
	queue[0].currentFrame = 1;
	eval(layerRef + '.' + queue[0].trailSpriteID +  styleRef + '.visibility = "visible"');

return 	queue[0].trailSpriteID;
}

function init() {
	
	for(x=0; x<NUM_OF_TRAIL_PARTS; x++)
		queue[x] = new trailSpriteObj(x+1) ;
	
	if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
	document.onmousemove = processMouse;

setInterval("processAnim();",25);
}	
if (document.all||document.layers)
window.onload = init;

//-->
</SCRIPT>

[ P á g i n a s u c e s i v a ]