Posicionamiento de imágenes HTML
Publicado por jose (1 intervención) el 30/04/2015 20:47:06
Hola, recurro al fora ya que no se me ocurre como puedo hacerlo, la idea es que el conjunto de imágenes queden centradas y tambien queden centradas al re dimensionar con el pequeño script java, dejo el código a ver si os ocurre algo, gracias!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<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>
Valora esta pregunta
0