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>
por cierto, gracias por ayudarme en todo
1

1 respuesta

1
Respuesta de
buenas, 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";
}
Saludos
Marcelo
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){
....
Saludos
Marcelo
Añade un comentario a esta respuesta
Añade tu respuesta
Haz clic para o
Escribe tu mensaje
¿No es la pregunta que estabas buscando?
Puedes explorar otras preguntas del tema Javascript o hacer tu propia pregunta: