Como se hace algo como esto...

Agripado · #1 (**permalink**) 09/09/2004, 14:42

Hola tengo una curiosidad sobre como hacer algo como la parte de esta web que dice

My Hamburg Süd
http://www.hamburgsud.com/WWW/EN/index.jsp

Mi agradecimiento por anticipado!

cmartin81 · #2 (**permalink**) 09/09/2004, 19:14

Qué es exactamente a lo que te refieres????

iconogt · #3 (**permalink**) 09/09/2004, 19:23

¿¿¿¿Yo tampoco entendí na,na,na....????

Khronos · #4 (**permalink**) 09/09/2004, 21:27

http://www.hamburgsud.com/WWW/EN/index.jsp

A la izquierda, bajo el menu, hay una imagen ke dice "My Hamburg Süd" ... Si colocas el mouse sobre esa imagen, veras ke se activa el cursor de link y si haces clic sobre la misma, entonces aparece un formulario para hacer login...

Supongo ke lo ke kieres saber es como hacer para generar ese efecto.

Probablemente mediante etiquetas DIV y algo de javascript, pero no estoy muy seguro.

No dudo ke pronto alguien pueda darnos una pista de como generar algo así.

sir_notos · #5 (**permalink**) 09/09/2004, 21:36

por que no buscan algo sobre el objeto style de JS o puedes usar el DOM

Khronos · #6 (**permalink**) 09/09/2004, 22:53

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">
<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

Agripado · #7 (**permalink**) 10/09/2004, 14:05

Claro,eso lo puedo hacer con facilidad en el dreamweaver, lo que quiero hacer es la animación como si se desplegara, similar a la de cuando haces click en "Buscar" de acá de los foros!

Agradezco de todos modos tu paciencia, y perdonenme por no haber sido específico!

;)