JavaScript - Mostrar imagen en una capa distina

   
Vista:

Mostrar imagen en una capa distina

Publicado por Rosy (15 intervenciones) el 02/06/2011 14:29:03
Hola, estoy haciendo una pagina web y estoy haciendo la maquetacion con capas ( <div> ).
Pues bien, tengo las siguientes capas:
<div id=cabecera>, donde muestro un titulo
<div id=lateral>, donde muestro un menu
<div id=cuerpo>, donde se mostraran los contenidos

Necesito que cuando haga click sobre un elemento del menu de la capa "lateral", se muestre una imagen pero en la capa "cuerpo"

Muchas gracias por cualquie aporte
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Mostrar imagen en una capa distina

Publicado por xve (1595 intervenciones) el 02/06/2011 16:10:40
Hola Rosy, para ello, yo programaria el evento onclick en la capa lateral para que cargue la imagen en la capa cuerpo... creo que seria algo así:

1
2
<div id="lateral"
onclick="document.getElementById('cuerpo').innerHTML('<img src=\"imagen.png\">')">


Comentame, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

No me resulta

Publicado por Rosy (15 intervenciones) el 02/06/2011 16:36:15
Gracias Xve por tratar de ayudarme, pero no me resulta.
La idea es que en la <div id="lateral"> se muestra opciones de menú, que cuando se de click en alguna de estas opciones, muestre imagenes en la <div id="cuerpo">, por ejemplo, en la <div id="lateral"> tengo una tabla de una columna y varias filas, en una de las opciones de la tabla aparece la opcion Puesta de Sol, la idea es que cuando el usuario de click en ese link, apareza en la <div id="cuerpo"> la imagen de una puesta de sol.
Te adjunto el codigo que tengo:

<head>
<style type="text/css">
#cabecera { background: #FF9900;
width:99%;
height:80px;
}
#pie { background:#FF9900;
width:99%;
height:40px;
clear:left;
font:Verdana, Arial, Helvetica, sans-serif;

}
#lateral { background: #3399FF;
float:left;
width:200px;
height:400px;
}
#cuerpo { background: #FFFFFF;
float:left;
width:74%;
height:400px;
}
.Estilo1 {
color: #FFFFFF;
font-weight: bold;
}
</style>

</head>

<body>

<div id="cabecera">
<h1 align="center"> CATALOGO</h1>
</div>


<div id="lateral">
<table width="200" border="1">
<tr>
<td align="center">CATEGORIAS</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>Puesta de Sol</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="cuerpo">


</div>
<div id="pie" align="center" >
Av Central 456 - Valparaiso - Chile
</div>

</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar