Demo Dynamic HTML - Puzzle e imágenes dinámicas

Puzzle e imágenes dinámicas

Compatibilidad: Ms Internet Explorer, Netscape

La demo examinada, que se cuenta entre las más interesantes de esta recopilación, destaca por un efecto técnico y gráfico absolutamente inédito para las páginas web y el código HTML.
La colocación dinámica es el eje de esta demo, que, si bien es de difícil impostación, permite obtener efectos estéticos de gran interés.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

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

// drag variables
dragActive = 0
dragObject = null
dragArray = new Array()
dragLayerX = 0
dragLayerY = 0
dragLayerZ = 3	// set this to the number of draggable layers

// DynLayer with slide, clip, and drag
function dynLayer(id,nestref,drag,ctop,cright,cbottom,cleft) {
	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
	// clipBy is not necessary for drag and drop
	this.clipTo = dynLayerClipTo
	this.clipValues = dynLayerClipValues
	if (ie) {
		if (ctop!=null && cright!=null && cbottom!=null && cleft!=null) this.clipTo(ctop,cright,cbottom,cleft)
		else if (this.css.pixelWidth && this.css.pixelHeight) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)
	}
	if (drag) dragArray[dragArray.length] = this
}
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 dynLayerClipTo(t,r,b,l) {
	if (n) {
		this.css.clip.top = t
		this.css.clip.right = r
		this.css.clip.bottom = b
		this.css.clip.left = l
	}
	else if (ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
function dynLayerClipValues(which) {
	if (n) {
		if (which=="t") return this.css.clip.top
		if (which=="r") return this.css.clip.right
		if (which=="b") return this.css.clip.bottom
		if (which=="l") return this.css.clip.left
	}
	else if (ie) {
		var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")
		if (which=="t") return Number(clipv[0])
		if (which=="r") return Number(clipv[1])
		if (which=="b") return Number(clipv[2])
		if (which=="l") return Number(clipv[3])
	}
}
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)
	}
}

function resetPieces() {
	finished = false
	for (var i=0;i<=5;i++) {
		for (var j=0;j<=5;j++) {
			eval('square'+i+j+'.slideTo('+(150+j*20+j)+','+(100+i*20+i)+',5,20,"finish()")')
		}
	}
}

finished = true
finishcount = 0
function finish() {
	finishcount++
	if (finishcount==36) {
		finished = true
		finishcount = 0
	}
}

</HEAD>

<BODY >

</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]