Cómo abrir un enlace de una celda en otra distinta

11/05/2004 - 21:08 por randolf | Informe spam

Hola

Estoy desarrollando una web en la que se muestra un album de fotos. La
estructura de la web es una tabla y a la izquierda se muestra la barra de
menús con miniaturas de las fotos; a la derecha, una celda en la que debería
abrirse una imagen según la miniatura que se seleccione. ¿Cómo podría hacer
esto? Con capas se hacerlo pero no con celdas; he probado con un Object pero
nada, debe ser que estoy haciendo algo mal o que se hace de otra forma.
Agradecería vuestra ayuda.

Un saludo
randolf

Siga el debate

3 respuestas

Tengo una respuesta

Preguntas similare

IE 7 como abrir dese el menu de favoritos el enlace en una pestaña nueva ?

Leer las respuestas

#1 rameltete

11/05/2004 - 22:15 | Informe spam

Hola:

Yo lo haría con javascript de la siguiente manera:
// BODY
1º Colocas en la celda que desees que muestre la imagen una etiqueta
img:

<img name="imagen" id="imagen" src="" width="100" height="100" />

2º En las imagenes de la izquierda les añades un vinculo que active una
funcion:

< a href="#" onclick="mostrar_Imagen('1');"><img name="miniatura1"
id="miniatura1" src="" width="100" height="100" /></a>

// HEAD
3º Ahora en creas la funcion para que cambie el src de "imagen" segun el
argumento que se le pase:

function mostrar_imagen() {
args = mostrar_imagen.arguments; // Recogemos el argumento
var src = args[0]; // Lo asignamos a una variable
/* Cambiamos el src del objeto imagen por el que aparece en esa posicion en
el array. Cuidado que los arrays cominezan a contar desde cero */
srcs = new Array ('','imagen1.jpg','imagen2.jpg');
/* Cambiamos el src del objeto imagen por el que aparece en esa posicion
en el array */
document.getElementById("imagen").src = srcs[src];
}

// El código sería este

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function mostrar_imagen() {
args = mostrar_imagen.arguments;
var src = args[0];
srcs = new Array ('','imagen1.jpg','imagen2.jpg');
document.getElementById("imagen").src = srcs[src];
}
</script>
</head>
<body>
<table width="47%">

<tr>
<td width="14%" height="50"><a href="#"
onClick="mostrar_imagen('1');"><img name="miniatura1" src="miniatura1.gif"
width="50" height="50" alt=""></a></td>
<td width="86%" rowspan="2"><div align="center"><img name="imagen"
id="imagen" src="" width="100" height="100" alt=""></div></td>
</tr>
<tr>
<td height="73"><a href="#" onClick="mostrar_imagen('2');"><img
name="miniatura2" src="miniatura2.gif" width="50" height="50"
alt=""></a></td>
</tr>
</table>
</body>
</html>

Espero que sea lo que necesitas y que te sirva.

Un saludo,
Rafael ;)

Responder a este mensaje

#2 Miguel Gonzalez

12/05/2004 - 14:15 | Informe spam

Hola Randolf. Una forma, utilizando javascript, es ir variando el origen
("src") de la imagen grande. Cada nuevo valor de origen que deseemos
mostrar se puede pasar a una función desde un enlace situado sobre cada
miniatura:

Ejemplo


<script type="text/javascript">
function cambiaImagen(imagenSrc){
var imagen;
imagen = document.getElementById("cuadroImagen");
imagen.src=imagenSrc;
}
</script>


<img id="cuadroImagen" src="1.jpg">


<a href="#" onclick="cambiaImagen('2.jpg');">Miniatura 2</a>

Fin Ejemplo

Obviamente, puedes situar la imagen grande a mostrar y las miniaturas
dentro de una tabla o en "divs".

Saludos!
Miguel

randolf wrote:

Hola

Estoy desarrollando una web en la que se muestra un album de fotos. La
estructura de la web es una tabla y a la izquierda se muestra la barra de
menús con miniaturas de las fotos; a la derecha, una celda en la que debería
abrirse una imagen según la miniatura que se seleccione. ¿Cómo podría hacer
esto? Con capas se hacerlo pero no con celdas; he probado con un Object pero
nada, debe ser que estoy haciendo algo mal o que se hace de otra forma.
Agradecería vuestra ayuda.

Un saludo
randolf

Responder a este mensaje

#3 Raistlin Majere

04/06/2004 - 10:37 | Informe spam

Otra opcion q tienes es cambiar el HTML contenido en la celda mediante
InnerHTML para asi no solo poder cambiar el src
sino tb el alt e incluso si tuviera un link o sencillamente si has de meter
2 imagenes o lo q sea q quieras meter en la celda

script en head:
<script type="text/javascript">
function CambiaHTML(imagenSrc){

document.getElementById("CeldaImg").innerHTML= "<img src='" + imagenSrc +"'

";

}
</script>

tag de la celda:
<td id="CeldaImg"><img src='1.jpg'></td>

link1:
<a href="#" onclick="CambiaHTML('2.jpg');">Mini 2</a>

otra opcion de link seria (esta no es indexada por los buscadores
<img src='mini1.jpg' onClick="CambiaHTML('2.jpg');" Style="Cursor:Pointer;">

si quisieras pasar el ALT o cualquier otra propiedad solo tendrias q añadir
parametros al JS y construir el HTML de una manera coherente.

Si necesitaras q ese HTML contuviera " deberas usar \" por ejemplo

document.getElementById("CeldaImg").innerHTML= "<img src='" + imagenSrc +"'
onClick=\"funcionJS2('" +pararm+"');\" >";

"randolf" escribió en el mensaje
news:yz9oc.75393$

Hola

Estoy desarrollando una web en la que se muestra un album de fotos. La
estructura de la web es una tabla y a la izquierda se muestra la barra de
menús con miniaturas de las fotos; a la derecha, una celda en la que

debería

abrirse una imagen según la miniatura que se seleccione. ¿Cómo podría

hacer

esto? Con capas se hacerlo pero no con celdas; he probado con un Object

pero

nada, debe ser que estoy haciendo algo mal o que se hace de otra forma.
Agradecería vuestra ayuda.

Un saludo
randolf

Siga el debate Respuesta

Responder a este mensaje

Ads by Google

Hacer una pregunta

Tengo una respuesta

Busqueda sugerida