Demo Dynamic HTML - Botones y contenidos que van pasando

Botones y contenidos que van pasando

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo crea un menú de botones (reemplazables en caso necesario) con efecto onMouseOver. Cuando se tocan los botones, se activa otro menú que describe los contenidos de cada una de las voces. No te lo pierdas.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

//DONT TOUCH THIS PART! ********************************************************
//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
//Page object, and cross-browser objects.
function makePageCoords(){this.x2=(n)?innerWidth:document.body.offsetWidth;
this.y2=(n)?innerHeight:document.body.offsetHeight;return this;}
function makeObj(obj,nest){nest=(!nest) ? '':'document.'+nest+'.'						
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')					
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');		
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;							
this.showIt=b_showIt;this.moveIt=b_moveIt;return this}
function b_showIt(){this.css.visibility="visible"}
function b_moveIt(x,y){this.x=x; this.y=y;this.css.left=this.x;this.css.top=this.y}
//Image preloading function
function preLoad(num,path,path2){for(i=0; i<=num; i++){this[i]=new Image(); 
this[i].src=path+(i+1)+path2+'.gif'}return this}
//CHANGE AFTER THIS ********************************************************

/************************************************************************************
Variables: (change this to adapt the script to your needs
************************************************************************************/
//Height of text images:
var imageHeight=25

//Here are the images for the buttons.
//The of images (5 images in the folder "" called 1.gif,2.gif,3.gif,4.gif and 5.gif)
pre=new preLoad(5,'','')
//The on images (5 images in the folder "" called 1_b.gif,2_b.gif,3_b.gif,4_b.gif and 5_b.gif)
preb=new preLoad(5,'','_b')

//Menu speed:
var mspeed=20

/************************************************************************************
Remember that if you change the size of the text images you need to change the clip
values and height and width on the divCont layer in the style tag.
************************************************************************************/

/************************************************************************************
Init, change the values is here.
************************************************************************************/
function init(){
	page=new makePageCoords()
	oBButtons=new makeObj('divBottomButtons')
	oBText=new makeObj('divBottomText',' divBottomCont')
	oBCont=new makeObj('divBottomCont')
	//Change the values in here to get the menu to show another place on the page.
	//Look at the documentsize tutorial for info on how to use the page object.
	//(page.x2 is the width of the document, page.y2 is the height)
	oBButtons.moveIt(page.x2-500,210)
	oBCont.moveIt(oBButtons.x-120,210)
	oBText.moveIt(0,3)
	oBButtons.showIt()
	oBCont.showIt()
}
//Mouseover and mouseout
function mover(num){oBButtons.ref["img"+num].src=preb[num].src; moveTo(num)}
function mout(num){oBButtons.ref["img"+num].src=pre[num].src; moveBack()}
//Moving the text layer, you shouldn't need to change anything here.
var tim;
function moveTo(num){
	clearTimeout(tim)
	gt=-((num+1)*imageHeight)+3
	if(oBText.y!=gt){
		if(oBText.y<gt) oBText.moveIt(oBText.x,oBText.y+5)
		else oBText.moveIt(oBText.x,oBText.y-5)
		tim=setTimeout("moveTo("+num+")",mspeed)
	}
}
function moveBack(){
	clearTimeout(tim)
	if(oBText.y!=3){oBText.moveIt(oBText.x,oBText.y+5); tim=setTimeout("moveBack()",mspeed)}
}
onload=init;
</script>

</HEAD>

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