HTML.Dyn@mico - Imagen que rebota

Inicio | Ayuda | Chat | Libro de Visitas

HTML.Dyn@mico

	Imágen que rebota
		Anterior	Inicio
	Descripción: Una imagen que rebota por toda la ventana del navegador. Es muy divertido! Demo: Por toda la pantalla... Instrucciones Paso 1: Descargue elguna de las siguientes imágenes y súbalas a su directorio web (click con el botón derecho del mouse y elija "Guardar imagen como..."): O también puedes usar tus propias imágenes. Paso 2: Agregue el siguiente código a la sección <head> de su página: <script language="JavaScript"> <!-- hide script from old browsers /****************************************** * Imagen que rebota Script - HTML.Dynamico 2001 * Mas Scripts y Recursos para tu web en: * http://www.htmldynamico.cjb.net *****************************************/ //Configure the below three variables (BallSpeed from 1 to 50, larger is faster) var ballWidth = 40; var ballHeight = 40; var BallSpeed = 8; var stopafter=0; //set time in seconds before ball disappears. Use 0 for never var maxBallSpeed = 50; var xMax; var yMax; var xPos = 0; var yPos = 0; var xDir = 'right'; var yDir = 'down'; var superballRunning = true; var tempBallSpeed; var currentBallSrc; var newXDir; var newYDir; function stopit(){ clearTimeout(doit) if (document.getElementById) document.getElementById("superball").style.visibility="hidden" else if (document.all) document.all("superball").style.visibility = "hidden"; else document.layers["superball"].visibility = "hide"; } function initializeBall() { if (document.all) { xMax = document.body.clientWidth yMax = document.body.clientHeight document.all("superball").style.visibility = "visible"; } else if (document.layers\|\|document.getElementById) { xMax = window.innerWidth-14; yMax = window.innerHeight; if (document.getElementById) document.getElementById("superball").style.visibility="visible" else document.layers["superball"].visibility = "show"; } setTimeout('moveBall()',400); if (stopafter>0) setTimeout("stopit()",stopafter1000) } function moveBall() { if (superballRunning == true) { calculatePosition(); if (document.all) { document.all("superball").style.left = xPos + document.body.scrollLeft; document.all("superball").style.top = yPos + document.body.scrollTop; } else if (document.layers) { document.layers["superball"].left = xPos + pageXOffset; document.layers["superball"].top = yPos + pageYOffset; } else if (document.getElementById) { document.getElementById("superball").style.left = xPos + pageXOffset; document.getElementById("superball").style.top = yPos + pageYOffset; } doit=setTimeout('moveBall()',30); } } function calculatePosition() { if (xDir == "right") { if (xPos > (xMax - ballWidth - BallSpeed)) { xDir = "left"; } } else if (xDir == "left") { if (xPos < (0 + BallSpeed)) { xDir = "right"; } } if (yDir == "down") { if (yPos > (yMax - ballHeight - BallSpeed)) { yDir = "up"; } } else if (yDir == "up") { if (yPos < (0 + BallSpeed)) { yDir = "down"; } } if (xDir == "right") { xPos = xPos + BallSpeed; } else if (xDir == "left") { xPos = xPos - BallSpeed; } else { xPos = xPos; } if (yDir == "down") { yPos = yPos + BallSpeed; } else if (yDir == "up") { yPos = yPos - BallSpeed; } else { yPos = yPos; } } if (document.all\|\|document.layers\|\|document.getElementById){ window.onload = initializeBall; window.onresize = new Function("window.location.reload()"); } // end hiding from old browsers --> </script> <style type="text/css"> #superball { position:absolute; left:0; top:0; visibility:hide; visibility:hidden; width:40; height:40; } </style> Paso 3: Copie y Pegue el siguiente código en la sección <BODY> de su web, fuera de cualquier otro tags: <span id="superball"><a href="../index.htm" tppabs="http://www.dynamicdrive.com/"><img name="superballImage" src="superball.gif" height="40" width="40" border="0"></a></span> Configurando el Script La imagen que rebota puede ser modificada por la que tu quieras. Para ello sólo tendrás que editar "img ...src=tuimagen.gif y el las dimensiones(heigth-width)" del Paso 3, pero también, hay cuatro variables al comienzo del código del Paso 2: width=ancho, heigth=alto, speed=velocidad y stopafter que controla el tiempo que permanecerá visible la imagen en la pantalla (0 es siempre visible). Listo!

Consultas

Envianos tus consultas o comentarios.

Recomendar

Puedes Recomendar esta web a tus amigos.



		HTML.Dyn@mico - © 2001-2003 - Todos los derechos reservados . www.htmldynamico.cjb.net