Barra de desplazamiento personalizada...

fabiandiaz · #1 (**permalink**) 07/05/2003, 11:59

Hola amigos...

Teniendo en cuenta que el DreamWeaver es HTML "puro y duro", es posible generar una barra de desplazamiento dentro de un espacio específico personalizada y la la que normalmente estamos acostumbrados a ver con el iExplorer???

He visto otros post pero hablan solo del color. Yo hago referencia al diseño; por ejemplo, una barra que se desplace sobre un fondo que yo mismo edita conservando la anchura y el largo sea por defecto...

Gracias por vuestra respuesta...

DragonX · #2 (**permalink**) 07/05/2003, 12:02

Si podes. Creando un Layer (DIV) y en la paleta de propiedades le pones que tenga barras de scroll, sino creando un E-frame.

salu2

fabiandiaz · #3 (**permalink**) 07/05/2003, 12:29

Dragón...

Dónde está el layer a que haces referencia (DiV)???... Porque lo que quiero es cambiarla a mi diseño y no solo el color...

Gracias

tunait · #4 (**permalink**) 07/05/2003, 12:31

fabian,

inserta una capa normal y corriente, y teniéndola seleccionad, busca en el panel de propiedades el atributo "desb" o "desbordamiento" (si lo tienes en inglés "overflow") y le das el valor de "auto"

fabiandiaz · #5 (**permalink**) 08/05/2003, 05:06

Perfecto!!!!... Y sobre esta capa trabajo las imágenes que desee???

Gracias por vuestra valiosísima ayuda...

vasquita_1978 · #6 (**permalink**) 25/07/2008, 21:18

Hola. Hice lo q te dijeron pero no termino de entender en donde pones el dise;o. Espero tu respuesta. Saludos

vasquita_1978 · #7 (**permalink**) 25/07/2008, 21:18

me podrias explicar como metiste el dise;o en esa barra. BEsos

furoya · #8 (**permalink**) 04/08/2008, 06:54

Yo también quiero saber!!. Todos ya conocemos los trucos para personalizar una scrollbar en Internet Explorer (también en Mozilla, pero no desde una página web), y me interesa mirar algún código generado por ese editor para saber cómo lo hace.

Hay algún viejo tema donde se explican varios de los trucos para IE 5.5+ que ya estamos acostumbrados a ver, pero habría que actualizarlos.

Propiedades del scroll

Los de cambiar el color (no en Firefox) o ponerle imágenes propias en lugar de los botones de dirección (los que tienen las flechas de 'arriba' y 'abajo') todavía andan; los de cambiar el tamaño o mostrar una imagen de fondo en la pista o el botón deslizable (sólo IExplorer) hay que escribirlos de nuevo.

Aprovecho el tema para postear el que pediste, fabiandiaz

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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TRACKBAR CON IMAGEN.</title>
<script type="text/javascript">

var colorInicio = null;

function colorFondo(){
if (colorInicio == null) var colorElegido = dlgHelper.ChooseColorDlg();
else var colorElegido = dlgHelper.ChooseColorDlg(colorInicio);
colorElegido = colorElegido.toString(16);
if (colorElegido.length < 6) {
var relleno = "000000".substring(0,6-colorElegido.length);
colorElegido = relleno.concat(colorElegido);
}
document.getElementsByTagName("html")[0].style.backgroundColor = 
document.getElementById("muestra").style.backgroundColor = 
colorElegido;
colorInicio = colorElegido;
}

</script>
<style type="text/css">

html {background-color:#808080; overflow:hidden; height:100%; 
background-image:url("http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif");}
body {background-color:#000000; color:#ffffff; overflow:auto; 
height:100%; margin:0; scrollbar-track-color:#abcdef; 
filter:chroma(color="#abcdef");}
h2 {margin:15px 10px; }
p {font-size:50pt; text-align:center;}
#muestra {height: 127px; width: 127px; background-color: #808080; 
color: #ffffff; font-family: cursive, decorative, fantasy; 
margin: 15px; }
</style>
</head>
<body>
<h2>Pone imagen de fondo en pista de barra de desplazamiento. <br>
(Para IExplorer)</h2>

<p><input type=button onclick="colorFondo()" value="COLOR FONDO"><br>
<img src="http://img43.imageshack.us/img43/7566/semitransmarmol5ba.gif
" id="muestra" alt="MUESTRA" ><br>
| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>
| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>| <br>
</p>

<object id=dlgHelper height=0px width=0px 
classid=clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b></object>
</body>
</html>

Como la imagen imita un mármol de color gris y algunas parsonas tienen configuradas sus barras en ese color, puse una con semitransparencia y un editor de colores, para que viren el de fondo a gusto.

Y dejo algunos enlaces relacionados

Aplicar CSS la barra de scroll

Aspecto de la barra de scroll

Barras con transparencia???

cambiar el scrollbar

slidebar / trackbar en html

Imagen.