Foros del Web » Creando para Internet » HTML »

Como se hace algo como esto...

Estas en el tema de Como se hace algo como esto... en el foro de HTML en Foros del Web. 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!...
  #1 (permalink)  
Antiguo 09/09/2004, 15:42
Avatar de Agripado  
Fecha de Ingreso: mayo-2001
Ubicación: En mi casa
Mensajes: 441
Antigüedad: 16 años, 6 meses
Puntos: 1
Como se hace algo como esto...

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!
__________________
El mundo es un mercado donde se compra honores, voluntad y conciencia
Samuel
  #2 (permalink)  
Antiguo 09/09/2004, 20:14
Avatar de cmartin81  
Fecha de Ingreso: enero-2004
Ubicación: Mexico D.F.
Mensajes: 93
Antigüedad: 13 años, 10 meses
Puntos: 0
Qué es exactamente a lo que te refieres????
__________________
_______________________________
Carlos Martin J.
  #3 (permalink)  
Antiguo 09/09/2004, 20:23
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
¿¿¿¿Yo tampoco entendí na,na,na....????
__________________
_______
Jorge Rojas.
  #4 (permalink)  
Antiguo 09/09/2004, 22:27
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
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í.
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #5 (permalink)  
Antiguo 09/09/2004, 22:36
Avatar de sir_notos  
Fecha de Ingreso: noviembre-2001
Ubicación: Mexicali
Mensajes: 709
Antigüedad: 16 años
Puntos: 1
por que no buscan algo sobre el objeto style de JS o puedes usar el DOM
__________________
Usuario Registrado de linux #374849
  #6 (permalink)  
Antiguo 09/09/2004, 23:53
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
Pregunta Sera esto?

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%">&nbsp;</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
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #7 (permalink)  
Antiguo 10/09/2004, 15:05
Avatar de Agripado  
Fecha de Ingreso: mayo-2001
Ubicación: En mi casa
Mensajes: 441
Antigüedad: 16 años, 6 meses
Puntos: 1
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!

;)
__________________
El mundo es un mercado donde se compra honores, voluntad y conciencia
Samuel
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 09:14.