Marcos para imágenes
A ver si me puedes ayudar en esto, es que no se me ocurre la manera de hacerlo.
Tengo dos funiones en javascript, una me va mostrando unas imágenes cada vez una, y la otra función me muestra todas las imágenes seguidas y al pinchar en una de ellas esta se hace más grande.
El problema es que les quiero poner un marco chulo, a las fotos y no se cómo hacerlo a ver si me puedes dar una idea.
Muchas gracias
Tengo dos funiones en javascript, una me va mostrando unas imágenes cada vez una, y la otra función me muestra todas las imágenes seguidas y al pinchar en una de ellas esta se hace más grande.
El problema es que les quiero poner un marco chulo, a las fotos y no se cómo hacerlo a ver si me puedes dar una idea.
Muchas gracias
Respuesta de Marcelo Origoni
1
Hola de nuevo. A ver, ¿para hacer unos marcos chulos para una imágenes se puede hacer con java o directamente lo tengo que hacer con otra aplicación?
Ahora he hecho una función que al ponerse encima de la imagen se hace grande, y al quitarse se queda como estaba. Tengo 4 imágenes, en las dos primeras me lo hace bien, pero es las 2 ultimas se vuelve loco, te paso el código a ver si ves el fallo.
Muchas gracias
<!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">
<SCRIPT LANGUAGE="JavaScript">
function grande1(){
image1.height="300"
image1.width="300"
}
function pequeña1(){
image1.height="94"
image1.width="127"
}
function grande2(){
image2.height="300"
image2.width="300"
}
function pequeña2(){
image2.height="94"
image2.width="127"
}
function grande3(){
image1.height="300"
image1.width="300"
}
function pequeña3(){
image1.height="94"
image1.width="127"
}
function grande4(){
image1.height="300"
image1.width="300"
}
function pequeña4(){
image1.height="94"
image1.width="127"
}
</script>
</head>
<body background="../../imagenes/Fondoderecha.png">
<p class="titulos">Parque Arqueológico de la 1ª Edad del Hierro en
el Valle del Ebro, </p>
<p class="titulos">Fréscano-Zaragoza</p>
<p class="letra">Visita obligada para conocer las poblaciones de la 1ª Edad
del Hierro que dieron origen a la formación de la cultura celtibérica.
El Parque Arqueológico agrupa un Centro de Interpre-tación en
Fréscano donde se ha reconstruido una casa, y un recorrido arqueológico
y natural con visitas a cinco yacimientos del término municipal de Burrén.
</p>
<table align="center">
<tr>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/1Burren_Burrena.jpg" name="image1" onMouseOver="grande1()" onMouseOut="pequeña1()" width="127" height="94" ><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/1Morredon.jpg" name="image2" onMouseOver="grande2()" onMouseOut="pequeña2()" width="127" height="94"><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/arqueodromoburren.jpg" name="image3" onMouseOver="grande3()" onMouseOut="pequeña3()" width="127" height="94"><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/Cabezo_La_Cruz.JPG" name="image4" onMouseOver="grande4()" onMouseOut="pequeña4()" width="127" height="94"><br></td>
</tr>
</table>
</body>
</html>
Ahora he hecho una función que al ponerse encima de la imagen se hace grande, y al quitarse se queda como estaba. Tengo 4 imágenes, en las dos primeras me lo hace bien, pero es las 2 ultimas se vuelve loco, te paso el código a ver si ves el fallo.
Muchas gracias
<!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">
<SCRIPT LANGUAGE="JavaScript">
function grande1(){
image1.height="300"
image1.width="300"
}
function pequeña1(){
image1.height="94"
image1.width="127"
}
function grande2(){
image2.height="300"
image2.width="300"
}
function pequeña2(){
image2.height="94"
image2.width="127"
}
function grande3(){
image1.height="300"
image1.width="300"
}
function pequeña3(){
image1.height="94"
image1.width="127"
}
function grande4(){
image1.height="300"
image1.width="300"
}
function pequeña4(){
image1.height="94"
image1.width="127"
}
</script>
</head>
<body background="../../imagenes/Fondoderecha.png">
<p class="titulos">Parque Arqueológico de la 1ª Edad del Hierro en
el Valle del Ebro, </p>
<p class="titulos">Fréscano-Zaragoza</p>
<p class="letra">Visita obligada para conocer las poblaciones de la 1ª Edad
del Hierro que dieron origen a la formación de la cultura celtibérica.
El Parque Arqueológico agrupa un Centro de Interpre-tación en
Fréscano donde se ha reconstruido una casa, y un recorrido arqueológico
y natural con visitas a cinco yacimientos del término municipal de Burrén.
</p>
<table align="center">
<tr>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/1Burren_Burrena.jpg" name="image1" onMouseOver="grande1()" onMouseOut="pequeña1()" width="127" height="94" ><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/1Morredon.jpg" name="image2" onMouseOver="grande2()" onMouseOut="pequeña2()" width="127" height="94"><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/arqueodromoburren.jpg" name="image3" onMouseOver="grande3()" onMouseOut="pequeña3()" width="127" height="94"><br></td>
<td align="center"> <img src="../../imagenes/museos/aragon/frescano/Cabezo_La_Cruz.JPG" name="image4" onMouseOver="grande4()" onMouseOut="pequeña4()" width="127" height="94"><br></td>
</tr>
</table>
</body>
</html>
Dentro de alguno de los CSS, puedes declarar algo como
table tr td img{
broder: 2px solid #000099;
}
Eso te dará un borde de 2 pixeles de ancho, y color azul.
table tr td img{
broder: 2px solid #000099;
}
Eso te dará un borde de 2 pixeles de ancho, y color azul.
