Condición IF en HTML

[mvazquez]

Hola colegas, es mi primer post en esta sección de HTML, resulta que estoy haciendo una pequeña pagina en código HTML, bueno, en mi pagina productos.html tengo dos secciones, la seccion izquierda es donde tengo el menú, anexo parte del código del menú.

Código:

Código:
<ul>											
<li class="item sep"> <img alt=""/> <a href="productos.html">Portátil </a></li>						
	<li class="item sep"> <img alt=""/> <a href="productos.html">Móvil </a></li>						
	<li class="item sep"> <img alt=""/> <a href="productos.html">Repetidores </a></li>	
</ul>

Y la sección derecha la quiero para mostrar las imágenes de los productos, lo que me gustaría poder hacer es que cuando hagan clic en Portátil muestra imágenes de Radios Portátiles y cuando le hagan clic Móvil quite las imágenes previas y muestre las imágenes de Radios Móviles, pero todo eso en la sección derecha, he encontrado que con JavaScript pero no tengo idea de cómo se haría, actualmente muestro ya las imágenes por defecto en la sección derecha, aquí dejo parte del código donde muestro dos imágenes.

Código:

Código:
<div class=" gallery">
<div class=" item">
	<a href="images/_Comunicacion/lK-TK7102H-TK-8102H.png" class="zoom" title="Kenwood TK-3230" rel="portfolio">
		<img src="images/_Comunicacion/sK-TK7102H-TK-8102H.png" class="gallery-image" alt="sample image" />
		</a>
	</div>
	<div class="gallery-item">
		<a href="images/_ControlAcceso/lSy_iclock360.png" class="zoom" title="Terminal IClock 360" rel="portfolio">
		<img src="images/_ControlAcceso/sSy_iclock360.png" class="gallery-image" alt="sample image" />
		</a>
</div>							
</div>

Con todo esto no tengo problema, lo que necesito es que mostrar unas imágenes u otras según a la opción que hagan click.

Ojala que me pudiesen apoyar, de antemano muchas gracias.

[falconmasters]

Esto deberías preguntarlo en el foro de javascript colega, ya que en javascript si tienes condicionales y se utiliza mucho lo que quieres hacer.

[emprear]

Cua les el objeto de repetir el tema 3 veces?

[chwc]

agregale unos ids y estilos a cada div de las imagenes asi:

Código HTML:

<div class=" gallery">
<div class=" item" id="imagenes1" style="display:block">
    <a href="images/_Comunicacion/lK-TK7102H-TK-8102H.png" class="zoom" title="Kenwood TK-3230" rel="portfolio">
        <img src="images/_Comunicacion/sK-TK7102H-TK-8102H.png" class="gallery-image" alt="sample image" />
        </a>
    </div>
    <div class="gallery-item" id="imagenes2" style="display:none">
        <a href="images/_ControlAcceso/lSy_iclock360.png" class="zoom" title="Terminal IClock 360" rel="portfolio">
        <img src="images/_ControlAcceso/sSy_iclock360.png" class="gallery-image" alt="sample image" />
        </a>
</div>                          
</div>
 

a cada seccion agregale un onclick y borrale el a

Código HTML:

<ul>                                            
<li class="item sep" onclick="mostrar(1)"> <img alt=""/> Portátil </li>                     
    <li class="item sep"  onclick="mostrar(2)" > <img alt=""/> Móvil </li>                      
    <li class="item sep"> <img alt=""/> Repetidores </li>   
</ul>
 

y agrega este codigo html, que crea una funcion de javascript ( la cual se linkea desde el onclick de las secciones

Código HTML:

<script type="text/javascript">
function docGet(entrada,eldisplay){
return document.getElementById(entrada).style.display=eldisplay;
}
function mostrar(entrada){
if(entrada === 1){
docGet('imagenes1','block');
docGet('imagenes2','none');
}
if(entrada === 2){
docGet('imagenes1','none');
docGet('imagenes2','block');
}
}
</script>
 

SALUDOS

[mariosm18]

Hola mvazquez, no se si entendi bien lo que quieres hacer o no, pero se puede hacer con CSS mira este link http://goo.gl/bK7Ou

[mvazquez]

Mil Gracias HWC

Estaba francamente apurado, que me pasaste me abrio el panorama.

No se que me falta que hice lo siguiente.

Les asigno un identificador a mi grupo de imagenes

Código:

	
Código HTML:
	
<div class="gallery skin-gallery" >						
	<div class="gallery-item" id="Portatil" style="display:block">
		<a href="images/_Comunicacion/lK-TK7102H-TK-8102H.png" class="zoom" title="Kenwood TK-3230" rel="portfolio">
			<img src="images/_Comunicacion/sK-TK7102H-TK-8102H.png" class="gallery-image" alt="sample image" />
		</a>
	</div>	
	
	<div class="gallery-item" id="Movil" style="display:none">
		<a href="images/_ControlAcceso/lSy_iclock360.png" class="zoom" title="Terminal IClock 360" rel="portfolio">
			<img src="images/_ControlAcceso/sSy_iclock360.png" class="gallery-image" alt="sample image" />
		</a>
	</div>												
</div> 

Le asigno el onclick a mi menu:

Código:

	
Código HTML:
	
<li class="item sep" onclick="mostrar(1)"> <img src="images/bullets/listBullet.gif" alt=""/> <b>Portátil</a></b> </li>	
<li class="item sep" onclick="mostrar(2)"> <img src="images/bullets/listBullet.gif" alt=""/> <b><a href="productos.html">Móvil</a></b> </li> 

Y agrego el Javscript:

Código:

	
Código HTML:
	
<script type="text/javascript">
function docGet(entrada,eldisplay){
return document.getElementById(entrada).style.display=eldisplay;
}
function mostrar(entrada){
if(entrada === 1){
docGet('Portatil','block');
docGet('Móvil','none');
}
if(entrada === 2){
docGet('Portatil','none');
docGet('Móvil','block');
}
}
</script> 

Solo me muestra la no que noe sta bloqueada, cuando hago clic en la siguiente liga me da este error:
Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2; .NET CLR 1.1.4322)
Fecha: Mon, 30 Apr 2012 19:00:25 UTC

Código:

Mensaje: Se requiere un objeto
Línea: 251
Carácter: 1
Código: 0
URI: file:///C:/Proyectos/Recientes/iPinsa/productos.html

Si le agrego la pagina a mi liga del menu ya no me da el error pero aun asi el resultado es el mismo:

Código:

	
Código HTML:
	
<li class="item sep" onclick="mostrar(1)"> <img src="images/bullets/listBullet.gif" alt=""/> <b><a href="productos.html">Portátil</a></b> </li>	
<li class="item sep" onclick="mostrar(2)"> <img src="images/bullets/listBullet.gif" alt=""/> <b><a href="productos.html">Móvil</a></b> </li> 

Que me puede estar haciendo falta.

De antemano muchisimas gracias

[chwc]

esto:

Código HTML:

<li class="item sep" onclick="mostrar(1)"> <img src="images/bullets/listBullet.gif" alt=""/> <b>Portátil</a></b> </li>  
<li class="item sep" onclick="mostrar(2)"> <img src="images/bullets/listBullet.gif" alt=""/> <b><a href="productos.html">Móvil</a></b> </li>
 

no era asi ?

Código HTML:

<li class="item sep" onclick="mostrar(1)"> <img src="images/bullets/listBullet.gif" alt=""/> <b>Portátil</a></b> </li>  
<li class="item sep" onclick="mostrar(2)"> <img src="images/bullets/listBullet.gif" alt=""/> <b>Móvil</b> </li>
 

, otra cosa, has puesto bien el elemento script que te pase? debe estar adentro de la etiqueta header.

te recomiendo no usar IE, usa google chrome o mozilla firefox, ademas tienen buenas herrmaientas para depurar Javascript , css y html