Como poner la imagen en el centro

Visto, visto lo q yo quiero hacer parece ser muy complicado. Entonces ahora lo que he hecho es una función que al hacer doble clic me muestra la imagen en grande y al haer clic me la deja como estaba, pero al mostrarme en grande la imagen me la muestra justo encima de la original, mi pregunta es si puedo mostrar la imagen en grande en el centro de la pantalla.
Te paso el codigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../estilos/letra.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/titulos.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/titulos2.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/letra2.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript" >
function  grande1(){
   image1.height="386"
   image1.width="512"
}
function pequeña1(){
   image1.height="100"
   image1.width="118"
}
function grande2(){
   image2.height="386"
   image2.width="512"
}
function pequeña2(){
   image2.height="100"
   image2.width="118"
}
function grande3(){
   image3.height="368"
   image3.width="512"
}
function pequeña3(){
   image3.height="100"
   image3.width="118"
}
function grande4(){
   image4.height="368"
   image4.width="512"
}
function pequeña4(){
   image4.height="100"
   image4.width="118"
}
function grande5(){
   image5.height="368"
   image5.width="512"
}
function pequeña5(){
   image5.height="100"
   image5.width="118"
}
function grande6(){
   image6.height="368"
   image6.width="512"
}
function pequeña6(){
   image6.height="100"
   image6.width="118"
}
</script>
</head>
<body background="../../../imagenes/FondoderechaYac.png">
<p class="titulos">CIUDAD DE ARCOBRIGA</p>
<p class="titulos2">Monreal de Ariza (<span class="titulos2">Zaragoza )</span></p>
<p class="letra2">Ciudad romana de Arcóbriga en el valle alto del río
  Jalón. </p>
<p class="letra"> </p>
<p class="letra">Excavada desde principios del s. XX hoy se aprecia, en la acrópolis,
  su urbanismo organizado en varios recintos con manzanas de viviendas separadas
  por calles rectas y varios edificios públicos singulares. Al Noroeste
  se encuentran las termas recientemente restauradas. En su entorno se localizan
  varios poblados celtibéricos y un posible santuario en la Cueva de las
  Cazoletas. </p>
<table align="center">
<tr>
<td align="center" width="150" height="100"> <img src="../../../imagenes/sitios/aragon/Arcobriga/Arco1.jpg" name="image1"  onDblClick="grande1()"onclick="pequeña1()" width="118" height="100"  ><br>   </td>
<td align="center" width="150" height="100"> <img src="../../../imagenes/sitios/aragon/Arcobriga/Arco2.jpg" name="image2" ondblclick="grande2()" onclick="pequeña2()" width="118" height="100"><br></td>
<td align="center" width="150" height="100"> <img src="../../../imagenes/sitios/aragon/Arcobriga/Arco3.jpg" name="image3" ondblclick="grande3()" onclick="pequeña3()" width="118" height="100"><br></td>
<td align="center" width="150" height="100"> <img src="../../../imagenes/sitios/aragon/Arcobriga/Arco4.jpg" name="image4" ondblclick="grande4()" onclick="pequeña4()" width="118" height="100"><br></td>
</tr>
<tr>
<td align="center" width="150" height="120"> <br></td>
<td align="center" width="150" height="100"> <img src="../../../imagenes/sitios/aragon/Arcobriga/Arco5.jpg" name="image5" onDblClick="grande5()" onClick="pequeña5()" width="118" height="100"><br></td>
<td align="center" width="150" height="100"><img src="../../../imagenes/sitios/aragon/Arcobriga/Arco6.jpg" name="image6" onDblClick="grande6()" onClick="pequeña6()" width="118" height="100"></td>
<td align="center" width="150" height="100"></td>
</tr>
</table>
</body>
</html>

1 Respuesta

Respuesta
1
Vas a tener que agregar una nueva fila a la tabla algo como
<tr>
<td colspan="4">
<img id="cargaImagen" src="../imagenEnBlanco.jpg" />
</td>
</tr>
Luego on click (o DblClick) llamas a mostrarImagen(this. Src), y la funcion mostratImagen es esta:
mostrarImagen(src){
imagen = document.getElementById('cargaImagen');
imagen.src = src;
imagen.height="386";
imagen.width="512";
}
hola otra vez, me vas a mandar a la.................. pero es que no me funciona,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../estilos/letra.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/titulos.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/titulos2.css" rel="stylesheet" type="text/css">
<link href="../../../estilos/letra2.css" rel="stylesheet" type="text/css">
<SCRIPT LANGUAGE="JavaScript" >
mostrarImagen(src){
imagen = document.getElementById('cargaImagen');
imagen.src = src;
imagen.height="386";
imagen.width="512";
}
</script>
</head>
<body background="../../../imagenes/FondoderechaYac.png">
<p class="titulos">CIUDAD DE ARCOBRIGA</p>
<p class="titulos2">Monreal de Ariza (<span class="titulos2">Zaragoza )</span></p>
<p class="letra2">Ciudad romana de Arcóbriga en el valle alto del río
  Jalón. </p>
<p class="letra"> </p>
<p class="letra">Excavada desde principios del s. XX hoy se aprecia, en la acrópolis,
  su urbanismo organizado en varios recintos con manzanas de viviendas separadas
  por calles rectas y varios edificios públicos singulares. Al Noroeste
  se encuentran las termas recientemente restauradas. En su entorno se localizan
  varios poblados celtibéricos y un posible santuario en la Cueva de las
  Cazoletas. </p>
<table align="center">
<tr>
<td align="center" width="150" height="100"> <img src="../../imagenes/sitios/aragon/Arcobriga/Arco1.jpg" name="image1"  onDblClick="mostrarImagen(this.src)"onClick="pequeña1()" width="118" height="100"  ><br>   </td>
<td align="center" width="150" height="100"> <img src="../../imagenes/sitios/aragon/Arcobriga/Arco2.jpg" name="image2" ondblclick="mostrarImagen(this.src)" onclick="pequeña2()" width="118" height="100"><br></td>
<td align="center" width="150" height="100"><img src="../../imagenes/sitios/aragon/Arcobriga/Arco3.jpg" name="image3" onDblClick="mostrarImagen(this.src)" onClick="pequeña3()" width="118" height="100">
      <br>
    </td>
<td align="center" width="150" height="100"> <br>
      <img src="../../imagenes/sitios/aragon/Arcobriga/Arco4.jpg" name="image4" onDblClick="grande4()" onClick="pequeña4()" width="118" height="100"></td>
</tr>
<tr>
<td align="center" width="150" height="120"> <br></td>
<td align="center" width="150" height="100"> <img src="../../imagenes/sitios/aragon/Arcobriga/Arco5.jpg" name="image5" onDblClick="mostrarImagen(this.src)" onClick="pequeña5()" width="118" height="100"><br></td>
<td align="center" width="150" height="100"><img src="../../imagenes/sitios/aragon/Arcobriga/Arco6.jpg" name="image6" onDblClick="mostrarImagen(this.src)" onClick="pequeña6()" width="118" height="100"></td>
<td align="center" width="150" height="100"></td>
</tr>
<tr>
<td colspan="4">
<img id="cargaImagen" src="../imagenEnBlanco.jpg" />
</td>
</tr>
</table>
</body>
</html>
Intenta declarar la funcion :P
<SCRIPT LANGUAGE="JavaScript" >
function mostrarImagen(src){
...

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas