<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Prueba</title>
<style type="text/css">
/*
* Capas
*/
/* Contenedor del texto */
#contenedor {
width: 340px;
height: 427px;
position: relative;
overflow: hidden;
font-size: 12px;
white-space: pre;
}
/* Contenedor de la miniatura */
#miniatura {
font-size: 4px;
position: absolute;
top: 4px;
left: 360px;
width: 92px;
cursor: crosshair;
border: 2px solid #009090;
white-space: pre;
background: #999999;
}
/* Ventanita que muestra que es lo que se está mostrando */
#ventana {
position: absolute;
top: 0px;
background: #EEEEEE;
width: 100%;
}
/* Contenedor del texto de la miniatura */
#contenedor-texto {
position: absolute;
width: 92px;
z-index: 2;
}
/* Capa que evita que se pulse en la miniatura */
#tapa {
position: absolute;
background: url(sp.gif);
width: 100%;
height: 100%;
z-index: 4;
}
pre {
font-family: Arial;
margin: 0px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var altoTot = 427; // Alto de las ventanas
var altoVtn = 135; // Alto de la ventanita que
// indica que es lo que se muestra
var anchoTot = 400; // Ancho de la ventana del texto
var anchoVtn = 92; // Ancho de la ventanita que
// indica que es lo que se muestra
var movimiento = false; // Si se debe mover
var desp = 0; // Desplazamiento que hay que
// tener en cuenta cuando se
// pincha dentro de la ventanita
// Devuelve el valor numerico de una
// propiedad de los estilos (elimina el px)
function valorCSS(obj, tipo) {
var aux = eval("parseFloat(obj.style." + tipo +
".substring(0,obj.style." + tipo + ".length-2))");
return aux;
}
// Empieza o finaliza el movimiento
// de la ventanita
function estadoScrolling(evt, obj, ok) {
movimiento = ok;
// Si hay movimiento, hay que tener
// en cuenta si se ha pinchado dentro
// de la ventanita, si es así, se toma
// la distancia desde el ratón hasta el "top"
// de la ventanita, para luego sumar esa distancia
if (ok) {
var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox;
var vtn = document.getElementById("ventana");
if (y < valorCSS(vtn, "top") ||
y > valorCSS(vtn, "top")+altoVtn) {
// si se ha pulsado fuera se
// desplaza a la posición y se
// toma como desplazamiento = 0
scrollingCapa(evt, obj);
desp = 0;
} else {
// si se ha pulsado dentro se
// toma la longitud del desplazamiento
desp = y - valorCSS(vtn, "top");
}
}
}
// Mueve la ventanita según la posición del ratón
// y desplaza (scrolling) el texto
function scrollingCapa(evt, obj) {
if (movimiento) {
var y = evt.layerY? evt.layerY : evt.offsetY; // Diferencias entre IE y Firefox;
// Ventana que contiene el texto
var orig = document.getElementById("contenedor");
// Alto total del contenedor del texto
var alto = orig.scrollHeight;
// Scrolling del texto
orig.scrollTop = (alto*(y-desp)/obj.offsetHeight)-10;
// Movimiento de la ventana
var vtn = document.getElementById("ventana");
var pos = parseInt(y-desp) > altoTot-altoVtn?
altoTot-altoVtn :
y-desp-2;
pos = pos < 0? 0: pos;
vtn.style.top = pos+"px";
}
}
// Crea la miniatura segun el texto
// del contenedor
function creaMiniatura() {
// Contenedor del texto
var orig = document.getElementById("contenedor");
// Contenedor de la miniatura
var mini = document.getElementById("miniatura");
// Inicializo la posición del scroll para cuando se haga refresh
orig.scrollTop = "0px";
// Se oculta la miniatura hasta que acabe
mini.style.display = "none";
// La miniatura está formada por 3 capas:
// 1. la ventanita que indica que se está mostrando
// 2. el texto
// 3. una tapadera para evitar que se seleccione el texto
mini.innerHTML = '<div id="ventana"></div><div id="contenedor-texto">'+orig.innerHTML+'</div><div id="tapa"></div>';
// Inicialización de valores
mini.style.height = altoTot+"px";
document.getElementById("contenedor-texto").style.height = altoTot+"px";
document.getElementById("ventana").style.height = altoVtn+"px";
document.getElementById("ventana").style.top = "0px";
// Se cogen todas las imagenes (que deben tener su
// alto y ancho fijados) y se redimensionan para que
// tengan un tamaño proporcional
var imgs = mini.getElementsByTagName("IMG");
var alto = orig.scrollHeight;
var porc = anchoVtn/anchoTot;
for (var i=0; i<imgs.length; i++) {
imgs[i].style.width = (porc*valorCSS(imgs[i], "width"))+"px";
imgs[i].style.height = (porc*valorCSS(imgs[i], "height"))+"px";
}
// Se muestra la miniatura
mini.style.display = "block";
}
//]]>
</script>
</head>
<body onload="creaMiniatura()">
<div id="contenedor"><pre>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="logo_cbtech.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="LOGOWEB2.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
<div align="center"><img src="logo_cbtech.jpg" alt="Sentido Web" style="width: 150px; height: 63px "/></div>
</pre></div>
<div id="miniatura" onmousedown="estadoScrolling(event, this, true)" onmouseup="estadoScrolling(event, this, false)" onmousemove="scrollingCapa(event, this)">
</div>
</body>
</html>