| Usuario |
ayuda para pintar un div poco a po... |
Desconocido
|
| Enviado - 6/11/2004 |
| |
Hola, mi pregunta creo que es sencilla, me gustaria pintar mi submenu que esta contenido en un div poco a poco, no se si con clip:rect podria hacerse o como, alguien puede ayudarme, es algo que tengo que presentar el lunes!!. Os pongo el código del del submenu dentro del css, y la funcion que tengo actualmente para mostrar y ocultar, pero me gustaria que lo hiciese de forma gradual:
<style type="text/css">
#test {
position:absolute;
display: block;
top:160;
left:150;
width:200;
height:155;
clip:rect(0,220,170,0);
font: bold 14px/1 Verdana, Arial, Helvetica, sans-serif;
color: white;
text-decoration: none;
background: transparent;
visibility: hidden;
}
</style>
las funciones son:
function checkBrowser(){
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 checkBrowser()
function show(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
obj.Visibility='visible'
}
function hide(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
obj.visibility='hidden'
}
y donde lo utilizo es:
COLUMNA DEL MENU
<td width=180 valign=top>
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr height=20>
<td background=aaa1.jpg width=20> </td>
<td background=aaa2.jpg> </td>
<td background=aaa3.jpg width=20> </td>
</tr>
<tr>
<td background=bbb1.jpg> </td>
<td bgcolor=#E77373 valign=botton align=left>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Asociación</span></a></div>
<div class=cssnav><a href="#" onmouseover="show('test')"><img src="punto.gif" alt="" /><span>La Comarca</span></a></div>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Galeria</span></a></div>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Turismo</span></a></div>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Actualidad</span></a></div>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Leader</span></a></div>
<div class=cssnav><a href="#" onmouseover="hide('test')"><img src="punto.gif" alt="" /><span>Enlaces</span></a></div>
</td>
<td background=bbb3.jpg> </td>
</tr>
<tr height=20>
<td background=ccc1.jpg width=20> </td>
<td background=ccc2.jpg> </td>
<td background=ccc3.jpg width=20> </td>
</tr>
</table>
</td>
Y COLUMNA DEL SUBMENU:(#test del CSS)
</table>
<div id=test onmouseover="show('test')" onmouseout="hide('test')">
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr height=20>
<td width=20><img src="aaa1.gif" id=celda1></td>
<td><img src="aaa2.gif"></td>
<td width=20><img src="aaa3.gif" id=celda1></td>
</tr>
<tr>
<td><img src="bbb1.gif"></td>
<td bgcolor=#E77373 valign=botton align=left>
<div class=nav2><a href="#">Situación geográfica</a></div>
<div class=nav2><a href="#">Población</a></div>
<div class=nav2><a href="#">Datos económicos</a></div>
<div class=nav2><a href="#">Historia</a></div>
<div class=nav2><a href="#">Patrimonio</a></div>
<td><img src="bbb3.gif"></td>
</tr>
<tr height=20>
<td width=20><img src="ccc1.gif" id=celda1></td>
<td><img src="ccc2.gif"></td>
<td width=20><img src="ccc3.gif" id=celda1></td>
</tr>
</table>
</div>
espero que alguien pueda ayudarme, creo q no debe ser complicao, pero me estoy iniciando en esto y aun no lo piloto bien, gracias |
| |
|
|
|
