Hola muy buenas a todos.Tengo una duda y me gustaria compartirla con todos vosotros:
1º Tengo una tabla con dos columnas y dos filas.
2º Dentro de una celda voy a insertar dos imagenes con los mismos tamaños
3º Por ultimo voy a insertar un boton fuera del formulario.
Tengo este codigo pero no se como hacer para que cuando ejecute la funcion solo se muestre una imagen y la otra permanezca oculta sin que cambien el tamaño de la celda y no se muestre un espacio en blanco del mismo tamaño que la imagen mas abajo.
Código HTML:
<html>
<head>
<script type="text/javascript" >
function mostrar(){
document.getElementById("img1").style.visibility = 'visible';
document.getElementById("img2").style.visibility = 'hidden';
}
function mostra(){
document.getElementById("img1").style.visibility = 'hidden';
document.getElementById("img2").style.visibility = 'visible';
}
</script>
</head>
<body>
<table width="174" height="250" border="1">
<tr>
<td width="104" height="150">
<img src="http://phoenixdex.alteredorigin.net/images/pokemon/canon/natu.png" width="100" height="100" style="visibility:hidden" id="img1">
<img src="http://www.morningkids.net/pokemon/177-natu-g.jpg" alt="" width="100" height="100" id="img2">
</td>
<td width="349"> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<input type="button" onClick="mostrar();" value="Mostar Img1">
<input type="button" onClick="mostra();" value="Mostar Img2">
</body>
</html> Muchas Gracias!