Foros del Web » Programación para mayores de 30 ;) » Java »

Posicionamiento de imágenes con html y java

Estas en el tema de Posicionamiento de imágenes con html y java en el foro de Java en Foros del Web. Hola, recurro al foro ya que no se me ocurre como puedo hacerlo, la idea es que el conjunto de imágenes queden centradas y también ...
  #1 (permalink)  
Antiguo 30/04/2015, 12:49
 
Fecha de Ingreso: abril-2015
Mensajes: 1
Antigüedad: 8 años, 10 meses
Puntos: 0
Posicionamiento de imágenes con html y java

Hola, recurro al foro ya que no se me ocurre como puedo hacerlo, la idea es que el conjunto de imágenes queden centradas y también queden centradas al re dimensionar con el pequeño script java, dejo el código a ver si os ocurre algo, gracias!!

<html>
<body>
<h1>Ejercicio Redimensionado JavaScript</h1>
<input id="ancho" type="number">Ancho
<input id="alto" type="number">Alto
<button type="button" onclick="Redim()">Redimensionar</button>

<br>
<IMG id="im1" SRC="1.jpg">
<IMG id="im2" SRC="2.jpg">
<IMG id="im3" SRC="3.jpg">
<IMG id="im4" SRC="4.jpg">
<IMG id="im5" SRC="5.jpg">
<IMG id="im6" SRC="6.jpg">
<IMG id="im7" SRC="7.jpg">
<IMG id="im8" SRC="8.jpg">
<IMG id="im9" SRC="9.jpg">

<script>

function Redim()
{
var imagen1=document.getElementById("im1");
var imagen2=document.getElementById("im2");
var imagen3=document.getElementById("im3");
var imagen4=document.getElementById("im4");
var imagen5=document.getElementById("im5");
var imagen6=document.getElementById("im6");
var imagen7=document.getElementById("im7");
var imagen8=document.getElementById("im8");
var imagen9=document.getElementById("im9");


var ancho=document.getElementById("ancho").value;
var alto=document.getElementById("alto").value;

var AnchoImagenes=ancho/3;

var AltoImagenes1=(300*alto)/742;
var AltoImagenes2=(200*alto)/742;
var AltoImagenes3=(242*alto)/742;


imagen1.style.width=AnchoImagenes+"px";
imagen1.style.height=AltoImagenes1+"px";
imagen2.style.width=AnchoImagenes+"px";
imagen2.style.height=AltoImagenes1+"px";
imagen3.style.width=AnchoImagenes+"px";
imagen3.style.height=AltoImagenes1+"px";
imagen4.style.width=AnchoImagenes+"px";
imagen4.style.height=AltoImagenes2+"px";
imagen5.style.width=AnchoImagenes+"px";
imagen5.style.height=AltoImagenes2+"px";
imagen6.style.width=AnchoImagenes+"px";
imagen6.style.height=AltoImagenes2+"px";
imagen7.style.width=AnchoImagenes+"px";
imagen7.style.height=AltoImagenes3+"px";
imagen8.style.width=AnchoImagenes+"px";
imagen8.style.height=AltoImagenes3+"px";
imagen9.style.width=AnchoImagenes+"px";
imagen9.style.height=AltoImagenes3+"px";


imagen1.style.position="absolute";
imagen1.style.top="100px";
imagen1.style.left="0px";

imagen2.style.position="absolute";
imagen2.style.top="100px";
imagen2.style.left=AnchoImagenes+"px";

imagen3.style.position="absolute";
imagen3.style.top="100px";
imagen3.style.left=AnchoImagenes+AnchoImagenes+"px ";

imagen4.style.position="absolute";
imagen4.style.top=100+AltoImagenes1+"px";
imagen4.style.left="0px";

imagen5.style.position="absolute";
imagen5.style.top=100+AltoImagenes1+"px";
imagen5.style.left=AnchoImagenes+"px";

imagen6.style.position="absolute";
imagen6.style.top=100+AltoImagenes1+"px";
imagen6.style.left=AnchoImagenes+AnchoImagenes+"px ";

imagen7.style.position="absolute";
imagen7.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen7.style.left="0px";

imagen8.style.position="absolute";
imagen8.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen8.style.left=AnchoImagenes+"px";

imagen9.style.position="absolute";
imagen9.style.top=100+AltoImagenes1+AltoImagenes2+ "px";
imagen9.style.left=AnchoImagenes+AnchoImagenes+"px ";

}

</script>
</body>
</html>
  #2 (permalink)  
Antiguo 30/04/2015, 13:05
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Posicionamiento de imágenes con html y java

josepb11, Java != JavaScript

Tampoco creo que haga falta utilizar todo ese código para lograr lo que quieres.
  #3 (permalink)  
Antiguo 03/05/2015, 10:13
Avatar de Profesor_Falken  
Fecha de Ingreso: agosto-2014
Ubicación: Mountain View
Mensajes: 1.323
Antigüedad: 9 años, 7 meses
Puntos: 182
Respuesta: Posicionamiento de imágenes con html y java

Cita:
josepb11, Java != JavaScript
Exacto, por eso este post debería estar en el foro de javascript y no en el de Java.


Un saludo
__________________
If to err is human, then programmers are the most human of us
  #4 (permalink)  
Antiguo 03/05/2015, 11:41
Avatar de Profesor_Falken  
Fecha de Ingreso: agosto-2014
Ubicación: Mountain View
Mensajes: 1.323
Antigüedad: 9 años, 7 meses
Puntos: 182
Respuesta: Posicionamiento de imágenes con html y java

Cita:
PD: Creo que no soy el único, ahora comprendo tu ironía Profesor_Falken
Jajaja, si que es verdad que de vez en cuando has confusiones de este tipo aquí.

La verdad es que pensaba que lo había posteado en otro foro y tu lo había movido a Java, por eso lo comentaba, porque pensaba que te habías equivocado al moverlo.

En cualquier caso, @josepb11, o bien posteas en el foro correcto o, si no, yo te recomiendo que centres las imagenes usando CSS

Lo suyo sería que metas las imagenes en un div:

Código HTML:
Ver original
  1. <div class="centrar">
  2. <IMG id="im1" SRC="1.jpg">
  3. <IMG id="im2" SRC="2.jpg">
  4. <IMG id="im3" SRC="3.jpg">
  5. </div>

Y después definas una CSS como esta:

Código CSS:
Ver original
  1. .centrar {
  2.   position: fixed;
  3.   top: 50%;
  4.   left: 50%;
  5.   transform: translate(-50%, -50%);
  6. }

Aquí tienes un ejemplo de centrado:
https://jsfiddle.net/kxdyqamm/



Un saludo
__________________
If to err is human, then programmers are the most human of us
  #5 (permalink)  
Antiguo 03/05/2015, 12:16
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Posicionamiento de imágenes con html y java

¿Yo?

No, lamentablemente los cols no podemos mover temas

Etiquetas: html, posicionamiento
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 08:36.