[SOLUCIONADO] Mostrar contenido segun parametro

alvaro0022 · #1 (**permalink**) 04/07/2014, 04:53

Necesito mostrar determinado contenido según resolución de imagen

Por ejemplo si la resolución de una imagen es de 1280x1024 mostrar determinado contenido (div o tabla), si la resolución de la imagen es 1920x1080 mostrar otro contenido (div o tabla).

Encontré esto en el foro, pero el problema que en este ejemplo se debe seleccionar lo que se quiere ver, yo necesito que sea automático según un parámetro, ya sea la resolución e una imagen o un texto.

Código:

<html>
<head>
<script language="Javascript"> 
function aparecer(id) {
	var d = document.getElementById(id);
	d.style.display = "block";
	d.style.visibility = "visible";
}
function ocultar(id) {
	var d = document.getElementById(id);
	d.style.display = "none";
	d.style.visibility = "hidden";
}
window.onload = function () {
	//Al cargar la página se oculta el div de consulta
	ocultar("capaConsultar");
}
</script> 
</head>
<body>
<table>
	<tr>
		<td scope="col">
			<div align="center">
				<a href="#capaIngreso" onClick="ocultar('capaConsultar');aparecer('capaIngreso');">Ingreso</a> - 
				<a href="#capaConsultar" onClick="ocultar('capaIngreso');aparecer('capaConsultar');">Consulta</a> -
			</div>
		</td>
	</tr>
</table>
<div id="capaIngreso" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Ingresar</div>
<div id="capaConsultar" style="position:absolute;text-align:center;top:100px;left:200px;border:solid 1px red;">Primer Cuadrado Consultar</div>
</body>
</html>

Alguna idea!!

Alexis88 · #2 (**permalink**) 04/07/2014, 11:36

Bastaría con que envíes el id a una función en la cual obtendrás sus medidas y en base a eso realizas lo que deseas.

Código HTML:

Ver original<img src = "imagen1.jpg" id = "ejemplo" />

Código Javascript:

Ver originalfunction foo(id){
    var imagen = document.getElementById(id),
        ancho = imagen.offsetWidth,
        alto = imagen.offsetHeight;
    
    if (ancho == 1280 && alto == 1024){ //1280x1024
        //Instrucciones
    }
    else if (ancho == 1920 && alto == 1080){ //1920x1080
        //Instrucciones
    }
    else{ //Otras medidas
        //Instrucciones
    }
}
 
foo("ejemplo");

Saludos

alvaro0022 · #3 (**permalink**) 05/07/2014, 17:39

Gracias por tu respuesta Alexis88

Estuve probando lo que me indicaste, pero al no saber mucho, no pude hacerlo funcionar, aquí lo que hice.

Código:

<html>
<head>
<script language="Javascript"> 
function foo(id){
    var imagen = document.getElementById(id),
        ancho = imagen.offsetWidth,
        alto = imagen.offsetHeight;
    
    if (ancho == 1024 && alto == 768){ 
	div = document.getElementById('texto1');
    div.style.display = 'block';
    }
    else if (ancho == 1920 && alto == 1080){ 
	div = document.getElementById('texto2');
    div.style.display = 'block';
    }
    else{ //Otras medidas
        //Instrucciones
    }
}
 
foo("ejemplo");
</script> 
</head>
<body>
        <img src = "imagen1024x768.jpg" id = "ejemplo" />
        <div id="texto1" style="display:none;">CONTENIDO A OCULTAR/MOSTRAR</div>
        <div id="texto2" style="display:none;">ddddddddd</div>
</body>
</html>

No se si estoy en lo correcto o totalmente equivocado!

Alexis88 · #4 (**permalink**) 05/07/2014, 18:09

Coloca el código JavaScript justo antes de la etiqueta </body>, de ese modo, surtirá efecto.

Saludos

alvaro0022 · #5 (**permalink**) 05/07/2014, 18:56

Clarooo!!!

Funciona de maravillas!!!!

Muchísimas gracias Alexis88, eres un genio!!!

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
        <img src = "imagen1024x768.jpg" id = "ejemplo" />
        <div id="texto1" style="display:none;">CONTENIDO A OCULTAR/MOSTRAR</div>
        <div id="texto2" style="display:none;">ddddddddd</div>
        <script language="Javascript"> 
function foo(id){
    var imagen = document.getElementById(id),
        ancho = imagen.offsetWidth,
        alto = imagen.offsetHeight;
    
    if (ancho == 1024 && alto == 768){ 
    div = document.getElementById('texto1');
    div.style.display = 'block';
    }
    else if (ancho == 1920 && alto == 1080){ 
    div = document.getElementById('texto2');
    div.style.display = 'block';
    }
    else{ //Otras medidas
        //Instrucciones
    }
}
 
foo("ejemplo");
</script> 
</body>
</html>

Aquí el código completo por si alguien quiere usarlo.

saludos!!