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