Demo Dynamic HTML - Visor de bloques de texto o imágenes

Visor de imágenes

Compatibilidad: Ms Internet Explorer, Netscape

Otra excelente demo crossbrowser que crea una parte de documento independiente del resto dentro de la cual se visualizan imágenes o texto. No es necesario hacer clic en los enlaces sino tan sólo pasar por encima el ratón.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

//You have to set some variables here:

//Set the font for the msg
msgFont='Arial,helvetiva'

//Set the fontSize in px
msgFontSize=12

//Set the fontColor
msgFontColor="black"

/********************************************************************************
Here's the array that holds the text to change the divmessage to
when you mouseover. Change the text here
********************************************************************************/
messages=new Array(6)
messages[0]="Éste es el primer enlace"
messages[1]="Segundo enlace"
messages[2]="Éste es el tercer enlace"
messages[3]="Visita Bratta.com"
messages[4]="Quinto enlace"
messages[5]="Para insertar imágenes evitar los superíndices dobles"
messages[6]=""

/********************************************************************************
You don't have to change anything below this
********************************************************************************/

//Browsercheck:
ie=document.all?1:0
n=document.layers?1:0

/********************************************************************************
Constructing the ChangeText object
********************************************************************************/
function makeChangeTextObj(obj){												
   	this.writeref=(n) ? eval('document.'+obj+'.document'):eval(obj);		
	this.writeIt=b_writeIt;					
}
function b_writeIt(text){
	if(n){
		this.writeref.write(text)
		this.writeref.close()
	}
	if(ie)this.writeref.innerHTML=text		
}
/********************************************************************************
The function that calls objects write function with the corect font size
and such onmouseover and mouseout.
********************************************************************************/
function changeText(num){
	if(ie || n) oMessage.writeIt('<span style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">'+messages[num]+'</span>')
}

/********************************************************************************
This calls the object constructor
********************************************************************************/
function changeTextInit(){
	if(ie || n) oMessage=new makeChangeTextObj('divMessage')	
}

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

</HEAD>

<div id="divlinks" style="position:absolute; left:200; top:170">
<a href="#" onmouseover="changeText(0)" onMouseout="changeText(6,0)">Enlace 1</a>
<a href="#" onmouseover="changeText(1)" onmouseout="changeText(6,1)">Enlace 2</a>
<a href="#" onmouseover="changeText(2)" onmouseout="changeText(6,2)">Enlace 3</a>
<a href="#" onmouseover="changeText(3)" onmouseout="changeText(6,3)">Enlace 4</a>
<a href="#" onmouseover="changeText(4)" onmouseout="changeText(6,4)">Enlace 5</a>
<a href="#" onmouseover="changeText(5)" onmouseout="changeText(6,5)">Enlace 6</a>
</div>
<div id="divMessage" style="position:absolute; left:200; top:200">
En este punto se visualiza el texto o las imágenes.
</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]