Demo Dynamic HTML - Abejas y flores

Abejas y flores

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo constituye, en mayor medida que las restantes, un perfecto ejemplo de las potencialidades de Dynamic HTML respecto de la colocación dinámica de texto e imágenes dentro de un documento

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

for (var i=0;i<=4;i++) {
eval("bee_r"+i+" = new Image()")
eval("bee_r"+i+".src = 'bee-r"+i+".gif'")
eval("bee_l"+i+" = new Image()")
eval("bee_l"+i+".src = 'bee-l"+i+".gif'")
}

function init() {
	bee = new dynLayer("beeDiv")
	bee.flyactive = 0
	bee.animactive = 0
	bee.animcount = 0
	bee.direction = "l"
	bee.animdir = 1
	bee.amplitude = 35
	bee.angleinc = 10
	bee.hoverangle = 0
	bee.centerX = bee.x
	bee.centerY = bee.y
	if (n) {
		dragObj = document.flowerDiv
		dragObj.xpos = dragObj.left
		dragObj.ypos = dragObj.top
	}
	if (ie) {
		dragObj = flowerDiv.style
		dragObj.xpos = dragObj.pixelLeft
		dragObj.ypos = dragObj.pixelTop
	}
	dragActive = 0
		
	document.onmousedown = mouseDown
	document.onmousemove = mouseMove
	document.onmouseup = mouseUp
	if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}

function mouseDown(e) {
	if ((n && e.which == 1) || ie) {
		if (n) {var x=e.pageX; var y=e.pageY}
		if (ie) {var x=event.x; var y=event.y}
		if (x>=dragObj.xpos && x<=dragObj.xpos+45 && y>=dragObj.ypos && y<=dragObj.ypos+72) {
			dragClickX = x-dragObj.xpos
			dragClickY = y-dragObj.ypos
			dragActive = 1
		}
	}
}

targetX = 100
targetY = 100
function mouseMove(e) {
	if (n) {var x=e.pageX; var y=e.pageY}
	if (ie) {var x=event.x; var y=event.y}
	if (dragActive) {
		dragObj.xpos = x-dragClickX
		dragObj.ypos = y-dragClickY
		dragObj.left = dragObj.xpos
		dragObj.top = dragObj.ypos
		targetX = dragObj.xpos+14
		targetY = dragObj.ypos+5
	}
	if (!bee.flyactive) {
		var distx = Math.abs(bee.x+8-targetX)
		var disty = Math.abs(bee.y+8-targetY)
		if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 35) {
			bee.slideActive = 0
			bee.animactive = 1
			animate()
			bee.flyactive = 1
			fly()
		}
	}
	if (dragActive) return false
}

function mouseUp(e) {
	if ((n && e.which == 1) || ie) {
		if (n) {var x=e.pageX; var y=e.pageY}
		if (ie) {var x=event.x; var y=event.y}
		dragActive = 0
	}
}

function animate() {
	if (bee.animactive) {
		if (n) {
			bee.ref.layers["beeDiv1"].document.images["beeImg1"].src = eval("bee_"+bee.direction+Math.floor(5*Math.random())+".src")
			bee.ref.layers["beeDiv2"].document.images["beeImg2"].src = eval("bee_"+bee.direction+Math.floor(5*Math.random())+".src")
		}
		else if (ie) {
			document.images["beeImg1"].src = eval("bee_"+bee.direction+Math.floor(5*Math.random())+".src")
			document.images["beeImg2"].src = eval("bee_"+bee.direction+Math.floor(5*Math.random())+".src")
		}
		setTimeout("animate()",20)
	}
}

function fly() {
	if (bee.flyactive) {
		var distx = Math.abs(bee.x+8-targetX)
		var disty = Math.abs(bee.y+8-targetY)
		if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 40 || distx > 15) {
			var angle = Math.floor(Math.atan(disty/distx)*180/Math.PI)
			if (distx==0 && disty==0) angle = 0
			if (targetX>=bee.x+8) {
				if (targetY<=bee.y+8) angle = angle    // 0 to 90
				else angle = 360-angle                // 270 to 360
				bee.direction = "r"
			}
			else {
				if (targetY<=bee.y+8) angle = 180-angle    // 90 to 180
				else angle = 180+angle           // 180 to 270
				bee.direction = "l"
			}
			bee.centerX += 3*Math.cos(angle*Math.PI/180)
			bee.centerY -= 3*Math.sin(angle*Math.PI/180)
			bee.hoverangle += bee.angleinc
			bee.moveTo(bee.centerX,bee.centerY-bee.amplitude*Math.sin(bee.hoverangle*Math.PI/180))
			setTimeout("fly()",20)
		}
		else {
			bee.flyactive = 0
			bee.slideTo(targetX-10,targetY-11,2,20,"land()")
		}
	}
}

function land() {
	bee.centerX = bee.x
	bee.centerY = bee.y
	bee.hoverangle = 0
	if (!bee.flyactive) {
		if (n) {
			bee.ref.layers["beeDiv1"].document.images["beeImg1"].src = bee_r1.src
			bee.ref.layers["beeDiv2"].document.images["beeImg2"].src = bee_r1.src
		}
		else if (ie) {
			document.images["beeImg1"].src = bee_r1.src
			document.images["beeImg2"].src = bee_r1.src
		}
		bee.animactive = 0
	}
}

function dynLayer(id,nestref) {
	if (n) {
		if (nestref) {
			this.css = eval("document." + nestref + ".document." + id)
			this.ref = eval("document." + nestref + ".document." + id + ".document")
		}
		else {
			this.css = document.layers[id]
			this.ref = document.layers[id].document
		}
		this.x = this.css.left
		this.y = this.css.top
	}
	else if (ie) {
		this.css = document.all[id].style
		this.ref = document
		this.x = this.css.pixelLeft
		this.y = this.css.pixelTop
	}
	this.obj = id + "Object"
	eval(this.obj + "=this")
	this.moveBy = dynLayerMoveBy
	this.moveTo = dynLayerMoveTo
	this.show = dynLayerShow
	this.hide = dynLayerHide
	this.slideBy = dynLayerSlideBy
	this.slideTo = dynLayerSlideTo
	this.slide = dynLayerSlide
}
function dynLayerMoveBy(x,y) {
	this.x += x
	this.css.left = this.x
	this.y += y
	this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
	this.x = x
	this.css.left = this.x
	this.y = y
	this.css.top = this.y
}
function dynLayerShow() {
	if (n) this.css.visibility = "show"
	else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
	if (n) this.css.visibility = "hide"
	else if (ie) this.css.visibility = "hidden"
}
function dynLayerSlideBy(distx,disty,inc,speed,fn) {
	if (!this.slideActive) {
		var endx = this.x + distx
		var endy = this.y + disty
		var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
		var dx = distx/num
		var dy = disty/num
		this.slideActive = 1
		this.slide(dx,dy,endx,endy,speed,fn)
	}
}
function dynLayerSlideTo(endx,endy,inc,speed,fn) {
	if (!this.slideActive) {
		var distx = endx - this.x
		var disty = endy - this.y
		var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
		var dx = distx/num
		var dy = disty/num
		this.slideActive = 1
		this.slide(dx,dy,endx,endy,speed,fn)
	}
}
function dynLayerSlide(dx,dy,endx,endy,speed,fn) {
	if (!fn) fn = null
	if (this.slideActive && (Math.floor(Math.abs(dx))<Math.floor(Math.abs(endx-this.x)) || Math.floor(Math.abs(dy))<Math.floor(Math.abs(endy-this.y)))) {
		this.moveBy(dx,dy)
		setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+speed+",\""+fn+"\")",speed)
	}
	else {
		this.slideActive = 0
		this.moveTo(endx,endy)
		eval(fn)
	}
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<DIV ID="instructions">Arrastra el jarrón de flores de la pantalla....</DIV>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]