Cambiar imagen con CSS

[Tarzan]

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.

[jomaruro]

Hola:

Quizá este ejemplo de Mikmoro te sirva de ayuda.

Saludos.

[Tarzan]

Gracias jomaruro,

me gusta el ejemplo porque sólo se utiliza CSS y está muy simplificado, pero no he sido capaz de emplearlo en mi código porque estoy confundido en algunos puntos.

Según he visto, el ejemplo tiene unos estilos de la etiqueta <a> asociados que muestran la imagen en el efecto hover. Pero yo quiero que la imagen se cargue cuando pulso sobre el enlace y no sé qué debo poner en el href.

es decir

este es mi enlace:
<a href=" No sé qué poner aquí porque no quiero que recargue la página" >nombre articulo</a>

QUiero que, al pulsar el enlace, se cargue una foto en una zona de la misma página sin recargar el resto. Luego debería pasarle la imagen, ¿no?
Luego sería:

<a href=" Lo que sea" src="../img/3.jpg">nombre articulo</a>

Y en la tabla donde va la imagen

<table><tr><td>
¿Cómo asocia aquí la imagen que debe cargar al pulsar el enlace?
</td></tr></table>

Siento que estoy bastante perdido.. ;(

[kseso?]

Con css se podría mostrar al :hover, :active, :focus, :target ... pero no es recomendable ni práctico si el número de imágenes es lo suficientemente alto y el conjunto de ellas lo suficientemente pesado.

La razón creo que es obvia: necesita cargar todas y cada una de las imágenes al mismo momento que la página, con todo lo que ello supone (peticiones al servidor, peso, demoras...)

Creo que debería utilizar algún otro lenguaje tipo javascript para pedir la imagen en cuestión sin necesidad de recargar toda la página.
Pero eso ya es objeto de otros foros.

[Tarzan]

Muchísimas gracias,

el número de imágenes puede ser corto o alto ya que depende de una consulta de artículos previa que realiza el usuario.
Así que no veo mejor opción que utilizar emplear un método en javascript que reciba la imagen y la muestre.

No se puede evitar lo inevitable ;)

Gracias de todas formas...