06-mar-2003, 15:09
|
#1 (permalink) |
 
Fecha de Ingreso: febrero-2003
Mensajes: 51
|
Personalizar Scrollbar
Hola, alguien sabe cómo hago para personalizar una barra de desplazamiento?? es decir, tengo un texto que deseo que se desplaze ya sea hacia arriba o hacia abajo mediante un scrollbar, dado el pequeño espacio que se dispone para el mismo, pero no deseo ponerle la barra de desplazamiento que win tiene por defecto, sino deseo hacer 2 imagenes gif y darles a estas la función de que desplacen el texto hacia arriba y hacia abajo. AYUDAAAA!! POR FAVOR!!! Gracias muchachos.... |
|
|
|
07-mar-2003, 10:44
|
#2 (permalink) |
Fecha de Ingreso: noviembre-2002
Ubicación: Merida
Mensajes: 2.179
|
Hola de nuevo
Aqui esta el codigo
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divUpControl{
position:absolute;
width:160px;
left:9px;
top:34px;
z-index:1;
text-align: right;
height: 19px;
}
#divDownControl{
position:absolute;
width:159px;
left:10px;
top:247px;
z-index:1;
text-align: right;
height: 19px;
}
#divContainer{position:absolute; width:157px; height:200px; overflow:hidden; top:51px; left:10; clip:rect(0,320,240,0); visibility:visible}
#divContent{
position:absolute;
top:-18px;
left:0px;
width: 142px;
height: 1064px;
}
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts
/*
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
Original Scrollable Area code developed by Thomas Brattli
To add more shock to your site, visit www.DHTML Shock.com
*/
function verifyCompatibleBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new verifyCompatibleBrowser()
var speed=50
var loop, timer
function ConstructObject(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=MoveAreaUp;this.down=MoveAreaDown;
this.MoveArea=MoveArea; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function MoveArea(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
function MoveAreaDown(move){
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function MoveAreaUp(move){
if(this.y<0){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
function PerformScroll(speed){
if(initialised){
loop=true;
if(speed>0) objScroller.down(speed)
else objScroller.up(speed)
}
}
function CeaseScroll(){
loop=false
if(timer) clearTimeout(timer)
}
var initialised;
function InitialiseScrollableArea(){
objContainer=new ConstructObject('divContainer')
objScroller=new ConstructObject('divContent','divContainer')
objScroller.MoveArea(0,0)
objContainer.css.visibility='visible'
initialised=true;
}
// end absolutely positioned scrollable area object scripts
</script>
</head>
<body bgcolor="999999" onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="select.gif" width="17" height="17" border="0"></a></div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="select.gif" width="17" height="17" border="0"></a></div>
<div id="divContainer">
<div id="divContent">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> <b>Scroll Area Content Start</b> <p> Lorem ipsum dolor sit amet,
consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt
ut labore et dolore magna aliquam erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
cum soluta nobis eligend optio comque nihil quod a impedit anim id
quod maxim placeat facer possim omnis es voluptas assumenda est, omnis
dolor repellend. Temporem autem quinsud et aur office debit aut tum
rerum necesit atib saepe eveniet ut er repudiand sint et molestia
non este recusand.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam
nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam
erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
cum soluta nobis eligend optio comque nihil quod a impedit anim id
quod maxim placeat facer possim omnis es voluptas assumenda est, omnis
dolor repellend. Temporem autem quinsud et aur office debit aut tum
rerum necesit atib saepe eveniet ut er repudiand sint et molestia
non este recusand.</p>
<b>Scroll Area Content End</b> </td>
</tr>
</table>
</div>
</div>
<!-- end absolutely positioned scrollable area object -->
</body>
</html>
|
|
|
|
Mode Lineal
