Hola a tod@s,
Tengo un listado de artículos, obtenido en una consulta a la base de datos, cuyos nombres son enlaces a una imagen. Me gustaría que el usuario viera las imágenes de los artículos, únicamente cargando dicha imagen en la misma página, sin cargar toda la página.
Por ejemplo, si tengo 50 artículos en un panel derecho y, a la izquierda he dejado un hueco para la imagen, cualquier usuario podrá ir pulsando artículo tras artículo viendo una imagen de cada uno sin necesidad de cargar toda la página, realizando la consulta, maquetación, etc. Únicamente cargando la imagen seleccionada tras pulsar cada enlace.
Mi idea es hacerlo con CSS aunque, según he leído, es obligatorio emplear javascript.
¿Alguien puede explicarme cómo sería el código?
¿Se puede hacer sólo con CSS?
Pego aquí mi código:
<table width='215px' height='305px' border=0 cellpadding=0 cellspacing=0 valign='top' bgcolor=red>
<tr>
<td>
<!—Código para cargar la imagen del artículo seleccionado --></td>
</tr>
</table>
<div id="tabla_scroll">
<table width='500px' height='500px' border=0 cellpadding=0 cellspacing=0 valign='top'>
<tr>
<td>
foreach ($resultadoArticulos as $articulo) {
// Obtener imagen del artículo
$rutaImagenes = "img/articulos/".$articulo['familia']."/".$articulo['imagen'];
// cabecera y demás campos
<table>
<tr>
<td class=style5 width=<? echo anchoNombre ?>height=<? echo altoRegistro?> bgcolor=#F2FAFC><? echo "<a href=\"$rutaImagenes\" target='_new'>";
echo $articulo["nombre"];?></a></td>
</tr>
</table>
}
</td>
</tr>
</table>
</div>
Aquí, el enlace abre la imagen en una ventana nueva y yo quiero que se cargue en la tabla con el fondo de color rojo.