Foros del Web » Programando para Internet » Javascript »

Extender el color de fondo de la capa

Estas en el tema de Extender el color de fondo de la capa en el foro de Javascript en Foros del Web. En el siguiente código mi objetivo es que el color amarillo de fondo de la capa "divTop1" se extienda, cuando se pulsa sobre el enlace, ...
  #1 (permalink)  
Antiguo 07/10/2004, 11:41
 
Fecha de Ingreso: octubre-2004
Mensajes: 5
Antigüedad: 19 años, 7 meses
Puntos: 0
Extender el color de fondo de la capa

En el siguiente código mi objetivo es que el color amarillo de fondo de la capa "divTop1" se extienda, cuando se pulsa sobre el enlace, hasta el final de la subcapa "divSub1". Pero lo único que consigo es que el color amarillo se pare justo cuando comienza a verse la subcapa "divSub1". Yo creo que el problema es de la propiedad clip pero he probado muchas cosas con ella y no lo consigo. A ver si me podéis dar el código exacto de como puedo conseguir que funcione, por favor:

<BASE HREF="file:/C|/DOCUME~1/ADMINI~1/CONFIG~1/Temp/">
<HTML>

<HEAD>

<TITLE>Dynamic HTML - demostración práctica </TITLE>
<style type="text/css">
<!--

#divTop1{position:absolute; width:250px;background-color:yellow;layer-background-color:yellow;border:1px;border-style:solid;border-color:black;}
#divSub1{position:absolute; left:15px; top:25px; width:250px;background-color:orange;layer-background-color:orange;border:1px;border-style:solid;border-color:black;}


#divCont{position:relative; left:300px; top:0px; height:400px; width:250px;}
A.clMain{font-family:Arial; font-size:17px; text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial; font-size:16px; text-decoration:none; color:black}

-->
</style>


<script language="JavaScript" type="text/javascript">
<!--

var stayFolded=true;
var exImg=new Image(); exImg.src='aperta.gif';
var unImg=new Image(); unImg.src='chiusa.gif';

var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4);

function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.';
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+ob j+'.style');
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('docum ent');
this.height=n?this.ref.height:eval(obj+'.offsetHei ght');

this.x=(n)? this.css.left:this.css.posLeft;this.y=(n)? this.css.top:this.css.posTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt;
return this;
}
function b_showIt(){this.css.visibility="visible";}
function b_hideIt(){this.css.visibility="hidden";}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y;}

function init(){
oTop=new Array();
oTop[0]=new makeMenu('divTop1','divCont');
oSub=new Array();
oSub[0]=new makeMenu('divSub1','divCont.document.divTop1');

for(i=0;i<oSub.length;i++){ oSub[i].hideIt(); }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height); }
}

function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num){
oSub[i].hideIt();
oTop[i].ref["imgA"+i].src=unImg.src;
}
}
for(i=1;i<oTop.length;i++){
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height);
}
}
if(oSub[num].vis()){
oSub[num].showIt();
oTop[num].ref["imgA"+num].src=exImg.src;
}else{
oSub[num].hideIt();
oTop[num].ref["imgA"+num].src=unImg.src;
}
}
}
if(browser) onload=init;


//-->
</script>


</HEAD>
<BODY id="idBody">


<div align=center>
</DIV>



<DIV id="divCont">
<DIV id="divTop1"><A href="#" onclick="menu(0); return false" class="clMain"><img src="chiusa.gif" name="imgA0" alt="" border="0" width="16" height="13"/> PRIMER GRUPO</A>

<DIV id="divSub1">
<A href="javascript:" class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15"/>Primer enlace</A>
<A href="javascript:" class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15"/>Segundo enlace</A>
<A href="javascript:" class="clSubb"><IMG SRC="link.gif" BORDER="0" VALIGN=middle HSPACE=8 width="15" height="15"/>Tercer enlace</A>
</DIV>

</DIV>
</DIV>
</BODY>
</HTML>

Gracias de antemano
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 00:40.