Demo Dynamic HTML - Colocar elementos en un documento

Colocar elementos en los ángulos

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo muestra cómo insertar elementos en cinco puntos absolutos de la página: en el centro y en los ángulos superior izquierdo, superior derecho, inferior derecho e inferior izquierdo

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/********************************************************************************
Here's the pageobject, see www.bratta.com/dhtml for tutorial on how it works.
********************************************************************************/
function makePageObject(){
	this.x=0;
	this.x2=(n)?innerWidth:document.body.offsetWidth;
	this.y=0;
	this.y2=(n)?innerHeight:document.body.offsetHeight;
	this.x50=this.x2/2;
	this.y50=this.y2/2;
	this.x10=(this.x2*10)/100
	this.y10=(this.y2*10)/100
	this.x15=(this.x2*15)/100
	this.y15=(this.y2*15)/100
	return this;
}		
/********************************************************************************
Making the objects, crossbrowser and makes a moveIt function that will move the 
object easely
********************************************************************************/
function makeObj(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')				
	this.moveIt=b_moveIt; 				
	return this
}
function b_moveIt(x,y){
	this.css.left=x
	this.css.top=y
}
/********************************************************************************
Here we call the object constructor to make objects, then we move
them to a choosen place on the page.
********************************************************************************/
function init(){
	//first me make a page object
	page=new makePageObject()
	//then we make the layer objects
	oCenter=new makeObj('divCenter')
	oRightTop=new makeObj('divRightTop')
	oRightBottom=new makeObj('divRightBottom')
	oLeftTop=new makeObj('divLeftTop')
	oLeftBottom=new makeObj('divLeftBottom')
	//now we place them
	//The divs has a width and height of 100, so we divide that with 2 to place it at center
	oCenter.moveIt(page.x50-50,page.y50-50)
	oRightTop.moveIt(page.x2-100,page.y)
	oRightBottom.moveIt(page.x2-100,page.y2-100)
	oLeftTop.moveIt(page.x,page.y)
	oLeftBottom.moveIt(page.x,page.y2-100)
}

//Calls the init function on pageload;
onload=init;
</script>

</HEAD>

<div id="divCenter" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Centrale</div>
<div id="divRightTop" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Alto a destra</div>
<div id="divRightBottom" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Basso a destra</div>
<div id="divLeftTop" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Alto a sinistra</div>
<div id="divLeftBottom" style="position:absolute; font-family:arial; font-size:10pt; padding:5pt; width:100; height: 100; clip:rect(0,100,100,0); background-color:#CCCCCC; layer-background-color:#CCCCCC">Alto a destra</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]