Agripado, si lo que quieres saber es como realizar el efecto de hacer aparecer y desaparecer algo a partir de un vínculo, justo como sucede en el ejemplo que mostraste, entonces tal vez te pueda interesar lo que voy a comentar.
Me puse a trabajar un rato y mirando el código fuente de la página que nos mostraste, creo que di con la forma de hacer el fulano efecto.
Primero, te muestro un
ejemplo propio basado en el anterior, y ahora te presento el código fuente de dicho ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<script language="javascript1.2" type="text/javascript">
function clipValues(obj,which)
{
if (document.all == null)
{
if (which=="t") return obj.clip.top;
if (which=="r") return obj.clip.right;
if (which=="b") return obj.clip.bottom;
if (which=="l") return obj.clip.left;
}
else
{
var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px");
if (which=="t") return Number(clipv[0]);
if (which=="r") return Number(clipv[1]);
if (which=="b") return Number(clipv[2]);
if (which=="l") return Number(clipv[3]);
}
}
function clipTo(obj,t,r,b,l)
{
if (document.all == null)
{
obj.clip.top = t;
obj.clip.right = r;
obj.clip.bottom = b;
obj.clip.left = l;
}
else
{
obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)";
}
}
function loginLayerToggle()
{
var obj = divtypeB;
if (document.all) obj = obj.style;
if (clipValues(obj, "b") > 30)
{
clipTo (obj, 0, 169, 25, 0);
}
else
{
clipTo (obj, 0, 169, 250, 0);
}
}
function MM_findObj(n, d) { //v4.01
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)
x=d.getElementById(n);
return x;
}
function My_toggle(layer){
var my_layer= MM_findObj(layer);
if(my_layer){
if(document.layers) {
my_layer.visibility=(my_layer.visibility=="show")? "hidden":"visible";
} else{
(my_layer.style).visibility=((my_layer.style).visi bility=="visible")?"hidden":"visible";
}
}
}
function enterkey(eEvent, thisForm) {
if (eEvent.keyCode == 13){
thisForm.submit();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" style="padding-top:10px; padding-bottom:10px; padding-left:5px; padding-right:5px"><DIV id=divtypeA
style="Z-INDEX: 1; LEFT: 0px; VISIBILITY: visible; WIDTH: 169px; POSITION: absolute; TOP: 208px; HEIGHT: 25px"><A
onclick="My_toggle('divtypeB')" href="javascript:;"><img src="img/img00.gif" width="169" height="25" border="0"></A> </DIV>
<DIV id=divtypeB
style="Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 169px; POSITION: absolute; TOP: 233px; HEIGHT: 96px"><!--div id="divtypeB" style="position:absolute; width:169; height:160; overflow:hidden; top:333; left:0; z-index:2;visibility:hidden"> -->
<img src="img/img01.gif" width="169" height="25" border="0"></DIV>
</td>
<td width="78%"> </td>
</tr>
</table>
</body>
</html>
Edita los valores de los estilos incrustados dentro de las etiquetas DIV, para modificar la ubicación.
En cuanto al código javascript, como es muy largo, sería ideal incluirlo en un archivo .js
Supongo que en el DIV oculto, puedes colocar cualquier cosa que se te ocurra.
En fin, a ver si esto era lo que deseabas saber
Saludos
