Foros del Web » Programando para Internet » Javascript »

Problema al aumentar tamaño de imagenes

Estas en el tema de Problema al aumentar tamaño de imagenes en el foro de Javascript en Foros del Web. Que hay futuros colegas: Antes de nada me gustaria agradeceros a todos vuestra colaboración, no en este post, que tambien (faltaba mas), sino a todos ...
  #1 (permalink)  
Antiguo 01/06/2013, 12:32
 
Fecha de Ingreso: junio-2013
Ubicación: Madrid
Mensajes: 1
Antigüedad: 6 años, 5 meses
Puntos: 0
Problema al aumentar tamaño de imagenes

Que hay futuros colegas:

Antes de nada me gustaria agradeceros a todos vuestra colaboración, no en este post, que tambien (faltaba mas), sino a todos los que colaborais en este, asi como en otros foros, facilitandonos el aprendiaje y en muchos casos la vida.

Llevo poco tiempo estudiando/practicando javascript, y no mucho mas informática, pero muchas de las dudas que me han surgido/problemas con los que me he encontrado las he podido resolver gracias al contenido de este foro. Es por ello, que tras buscar y no encontrar nada me he decidido a haceros la siguiente consulta:

Estoy haciendo una práctica para el instituto. El enunciado exige una página web que contiene una serie de fotografias, las cuales al ser pinchadas deben aumentar su tamaño al máximo posible teniendo en cuenta el tamaño de la ventana.

El código js que estoy utilizando es este:

function aumentar(idImagen) {

document.getElementById(idImagen).width = 0.7*(window.innerHeight);

document.getElementById(idImagen).height = (window.innerHeight);

document.getElementById(idImagen).scrollIntoView(t rue);


}

function reducir(idImagen) {

document.getElementById(idImagen).width = 120;

document.getElementById(idImagen).height = 170;

}

Todo funciona bien, la imagen aumenta al máximo al hacer click sobre ella, y el scroll se situa a la altura perfecta. El problema esta en que la imagen aumentada no se superpone a las demas que la rodean. Es decir, la imagen aumenta su tamaño correctamente pero queda tapada (al menos parcialmente) por el resto de fotografias.

¿Cómo podria solucionarlo?
  #2 (permalink)  
Antiguo 01/06/2013, 23:13
Avatar de ggomez91  
Fecha de Ingreso: octubre-2008
Mensajes: 181
Antigüedad: 11 años, 1 mes
Puntos: 13
Respuesta: Problema al aumentar tamaño de imagenes

se me ocurren dos formas, una es aumentando el z-index de la imagen que estás agrandando de forma que se ponga frente a las otras. La otra es ocultar las imagenes que no se estan agrandando con .style.visibility = "hidden". Saludos!
  #3 (permalink)  
Antiguo 05/02/2014, 22:02
 
Fecha de Ingreso: febrero-2014
Ubicación: en la web
Mensajes: 1
Antigüedad: 5 años, 9 meses
Puntos: 0
Respuesta: Problema al aumentar tamaño de imagenes

Sé que éste tema es ya algo viejo, pero no está demás ayudar.

Estaba leyendo el téma en el foro e hice el codigo, quizas les sea de ayuda a alguien.

<html>
<head>
<style>
* {
margin: 0px;
}
#imgMostrar {
-moz-box-shadow: 0px 0px 10px white;
-ms-box-shadow: 0px 0px 10px white;
-o-box-shadow: 0px 0px 10px white;
-webkit-box-shadow: 0px 0px 10px white;
cursor: pointer;
}
img.img {
width: 200px;
cursor: pointer;
height: 150px;
}
</style>
<script>
function aumentar(img){
contenedor=document.getElementById("contenedor");
contenedor.style.backgroundColor = 'rgba(0,0,0,0.9)';
contenedor.style.width = '100%';
contenedor.style.height = '100%';
contenedor.style.position = 'fixed';
contenedor.innerHTML = "<br><br><br><center><img id='imgMostrar' width='700px' src="+img.src+"></center>";
contenedor.onclick = quitar;
}
function quitar(){
window.location.reload();
}
</script>
</head>
<body>
<div id="contenedor">
</div>
<br>
<br>
<br>
<!-- COPIAR SOLO LA ETIQUETA IMG Y CAMBIAR UNICAMANETE LA DIRECCION URL DE LA IMAGEN -->
&nbsp;&nbsp;&nbsp;<img class="img" src="http://2.bp.blogspot.com/-gcelxN6QZBc/UHMZ-fxU6pI/AAAAAAAAVLA/7iYRQQUuMw0/s1600/Fondos%2Bde%2BMujeres%2BHermosas%2B-%2BWww.10Pixeles.Com%2B(12).jpgg" onclick="aumentar(this)">
&nbsp;&nbsp;&nbsp;<img class="img" src="http://1.bp.blogspot.com/-G3hL-l1GNJc/T2KYtzxNoiI/AAAAAAAAWs0/cI1JxQWsSkQ/s1600/Camila-Davalos-Hot_01.jpg" onclick="aumentar(this)">
</body>
</html>

Simplifiqué el codigo. Modifiquenlo a la manera de ustedes.

Etiquetas: aumentar, funcion, imagenes, js, tamaño
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:33.