Foros del Web » Creando para Internet » Diseño web »

Banner en scrollbar.

Estas en el tema de Banner en scrollbar. en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/07/2009, 14:13
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Banner en scrollbar.

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.

Última edición por furoya; 23/12/2010 a las 07:58 Razón: Actualicé código.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:41.