Banner en scrollbar.

furoya · #1 (**permalink**) 08/07/2009, 13:13

Un efecto tan raro como incompatible. Lo dejo aquí para no seguir offtopiqueando el tema

Imagen fija sobre texto en un scrollbar.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>BANNER EN SCROLLBAR.</title>
<script type="text/javascript">
function mide(){
var anchoUtil = document.getElementById("contenido").clientHeight;
var anchoScrollBar = document.getElementById("contenido").offsetHeight - anchoUtil;

document.getElementById("baner").style.height = anchoScrollBar + "px";
document.getElementById("baner").style.fontSize = anchoScrollBar + "px";
document.getElementById("baner").style.top = anchoUtil + "px";
}
onload = mide;
</script>
<style type="text/css">
body {width: auto; background-color: #808080; }
#contenedor {width: 400px; height: 300px; overflow: hidden; 
background: #c0c0c0; position: relative; }

#baner {position: relative; width: 400px; background-color: threedface; 
color: buttontext; font-size: 20px; font-weight: bold; top: 280px; }

#contenido {position: absolute; top: 0; left: 0; width: 400px; color: #000000; 
font-size: 34px; height: 300px; background-color: transparent; 
overflow-x: scroll; color: #000000; scrollbar-face-color: #abcdef; 
scrollbar-base-color: scrollbar; scrollbar-track-color: scrollbar; 
filter: progid:DXImageTransform.Microsoft.Chroma(color='#abcdef'); 
-ms-filter: progid:DXImageTransform.Microsoft.Chroma(color='#abcdef'); }

p {margin-top: 100px; white-space: nowrap;
}
</style>
</head>
<body>
<h2>Banner en scrollbar. (IE)</h2>
<div id=contenedor>
<marquee behavior="alternate" id="baner">__Foros del Web.__
</marquee>
<div id=contenido>
<p>0 &harr;&harr;&harr; 1 &harr;&harr;&harr; 2 &harr;&harr;&harr; 3 &harr;&harr;&harr; 4 &harr;&harr;&harr; 5 &harr;&harr;&harr; 6 &harr;&harr;&harr; 7 &harr;&harr;&harr; 8 &harr;&harr;&harr; 9</p>
</div>
</div>
</body>
</html>

Si alguien tiene una idea sobre cómo se puede usar esto —aunque sea sólo para IExplorer 5.5+—, acá está su espacio. Se aceptan sugerencias.