Uso de DHTML Avanzado (c/JavaScript).

El siguiente código demuestra el uso de JavaScript con capas HTML / XHTML (Tags <div>) :

Vea esta Aplicación en Acción

La definición del documento principal es la siguiente:

 
<bodybgcolor="#FFFFFF">
<h2 align="center"> Casas Presidenciales </h2>

<script type="text/javascript">
<!--
generarPantalla();
//-->
</script>

La única declaración JavaScript define la función llamada generarPantalla(), dicha función es la encargada de generar el documento en sí.La definición de este método (generarPantalla()) así como aquellas funciones JavaScript auxiliares, pueden ser definidas e importadas a través de una librería (*.js) o en linea con los elementos <script>.

A continuación se describen las diversas funciones JavaScript empleadas en la generación de este documento DHTML :

 
 
// Definir Variables para layers (<div>)
var dWidLyr  = 450;
var dHgtLyr  = 450;
var layerActual = 0;
var zIdx 	 = -1;

// Re-ajustar Variables a la resolución de Pantalla del Usuario
var sWidPos  = ((screen.availWidth)  / 2) - (dWidLyr / 2);
var sHgtPos  = ((screen.availHeight) / 2) - (dHgtLyr / 2);
var ocultarDIV = 'hidden';
var mostrarDIV = 'visible';

Esta primer declaración define las diversas variables globales que serán empleadas a lo largo de las funciones JavaScript.

 

// Definir una Funcion para Generar Layers
function genLayer(sName, sLeft, sTop, sWdh, sHgt, sVis, edificio) {
		document.writeln('<div id="' + sName + '" 
                                          style="position:absolute; 
                                                 overflow:none; 
                                          left:' + sLeft + 'px; 
                                          top:' + sTop + 'px; 
                                          width:' + sWdh + 'px; 
                                          height:' + sHgt + 'px;
			                  visibility:' + sVis + '; 
                                          z-Index=' + (++zIdx) + '">' + 
                                             edificio + '
                                   </div>');
}

La función genLayer es utilizada para generar un elemento <div> (capa/"layer"), la declaración emplea dos características no mencionadas en el ejemplo anterior de <div> : id para nombrar la capa y hacer futura referencia, así como visibility empleado para mostrar u ocultar la capa en determinado momento.

 

// Funcion Constructor para definir cada Diapositiva
function diapositiva(nombreImagen, pais, edificio) {
	this.name    = nombreImagen;
	this.pais    = pais;
	this.edificio    = edificio;
	this.contenido = 
		'<table width="500" cellpadding="10">' +
                '   <tr> ' +
                '     <td width="60%" valign="top">' + 
          		'<img src=../graficas/casas/' + nombreImagen + '.jpg ' +
                        '         heigth="200" width="400"> ' + 
                '     </td>' + 
		'     <td width="40%" valign="top"> ' + 
                         '<h2>Pais:</h2> + '
                         '<h2> <i>' + mayusculas(pais) + '</i></h2>' + 
		          '<b>Edificio :</b> ' +
                          '<br>' + edificio + 
                       '</td> ' + 
                 '    </tr> ' + 
                 '</table>';

	return this;
	}

Se define un constructor para generar los elementos HTML / XHTML (Tabla) de las diversas diapositivas que serán desplegadas en el documento.

 

// Definicion de Arreglo para toda Diapositiva
var juegoDiap  = new Array(
	new diapositiva('casarosada', 'Argentina', 'Casa Rosada<br/><i>Buenos Aires</i>.'), 
	new diapositiva('narino', 'Colombia', 'Palacio de Nariño<br/><i>Bogota</i>.'),
	new diapositiva('lamoneda', 'Chile', 'Palacio de la Moneda<br/><i>Santiago</i>.'),
 	new diapositiva('moncloa', 'España', 'Palacio de la Moncloa<br/><i>Madrid</i>.'),
        new diapositiva('lospinos', 'México', 'Los Pinos<br/><i>Distrito Federal</i>.'), 
	new diapositiva('garzas', 'Panamá', 'Palacio de las Garzas,<br/><i>Panama</i>'), 
	new diapositiva('lopez', 'Paraguay', 'Palacio de Lopez<br/><i>Asunción</i>.'),
	new diapositiva('casablanca', 'U.S.A', 'Casa Blanca<br/><i>Washington,D.C</i>.'),
	new diapositiva('miraflores', 'Venezuela', 'Palacio de Miraflores<br/><i>Caracas</i>.')
			);

Se define un arreglo para contener las diversas diapositivas del documento, dicho arreglo es generado a partir del constructor declarado anteriormente.

 

// Funcion para convertir el texto del Pais a Mayusculas
function mayusculas(str) {
	return str.toUpperCase();
	}

La función anterior simplemente convierte sus valores de entrada a letras mayúsculas.

 

// Funcion para generar todas las diapositivas (capas/<div>) del documento
function generarPantalla() {
	var menuStr = '';
	for (var i = 0; i < juegoDiap.length; i++) {

		// Crear Todos los Layers para Diversas Casas.
		genLayer('diapositiva' + i, sWidPos, 45, ' + 
                         ' dWidLyr, dHgtLyr, ' + 
                         '(i == 0 ? mostrarDIV : ocultarDIV), ' + 
                         ' juegoDiap[i].contenido);

		// Generacion de Menu HTML / XHTML para Navegar sobre los Layers
			menuStr += '<a href="" ' +  
                                   'onMouseOver="statusInf(); ' + 
                                   'selectDIV(' + i + ');' + 
			' return true;"' + 
			' onMouseOut="statusInf(); selectDIV(' + i + ');' + 
			' return true;"' + 
			' onClick="return false;">' + juegoDiap[i].pais + '</a><br>'; 
		}

	// Crear Layer de Menu
	genLayer('menu_guia', sWidPos - 104, 43, 100, 200, mostrarDIV, 
		'<div id="menu_guia">' + 
                '<b>Menu</b> ' + menuStr +
		'</div>');
	}

La función anterior es aquella colocada directamente en el documento, y consiste de las siguientes declaraciones:

Se inicia un ciclo con el número de iteraciones equivalente al arreglo que contiene las diapositivas.
En cada iteración se invoca el método genLayer con los diversos parámetros de la diapositiva; como fue descrito anteriormente, esta función (genLayer) es aquella utilizada para crear los elementos <div>.
Se concatena el elemento (menuStr) para generar una lista con las diversas diapositivas; nótese que en esta declaración se utilizan los eventos onMouseOut y onMouseOver para realizar modificaciones conforme el "mouse" del usuario navegue dicha lista.
Terminado el ciclo, se invoca de nuevo el método genLayer para generar la capa llamada menu_guia que contendrá la lista de las diversas diapositivas.

 
// Definir una funcion para ocultar Layers
function ocultarLayer(name) {
	refLayer(name).visibility = ocultarDIV;
	}

// Definir una funcion para mostrar Layers
function mostrarLayer(name) {
	refLayer(name).visibility = mostrarDIV;
	}

// Definir una funcion para referenciar Layers
function refLayer(name) {
       return eval('document.getElementById("' + name + '").style');
}

// Funcion para seleccionar diapositiva cuando el usuario navege el menu
function selectDIV(ref) {
	ocultarLayer('diapositiva' + layerActual);
	layerActual = ref;
	mostrarLayer('diapositiva' + layerActual);
	}

Los tres primeros métodos son empleados para modificar el parámetro de despliegue (esconder/mostrar) de los diversos elementos <div> (Diapositivas), mientras el último método es utilizado para llevar acabo el proceso como tal una vez que el usuario navegue la lista de Diapositivas.

 

// Colocar Mensaje de Estado en la parte inferior del Navegador
function statusInf() 
  { window.status = 'Casas Presidenciales'; }

Esta última función es utilizada para modificar la barra de estado en la parte inferior del "Browser".

[Cerrar Ventana]