Foros del Web » Creando para Internet » CSS »

Cambiar imagen con CSS

Estas en el tema de Cambiar imagen con CSS en el foro de CSS en Foros del Web. Hola a [email protected], Tengo un listado de artículos, obtenido en una consulta a la base de datos, cuyos nombres son enlaces a una imagen. Me ...
  #1 (permalink)  
Antiguo 30/12/2010, 01:18
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Cambiar imagen con CSS

Hola a [email protected],

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.
  #2 (permalink)  
Antiguo 30/12/2010, 04:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar imagen con CSS

Hola:

Quizá este ejemplo de Mikmoro te sirva de ayuda.

Saludos.

  #3 (permalink)  
Antiguo 30/12/2010, 06:45
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Cambiar imagen con CSS

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.. ;(
  #4 (permalink)  
Antiguo 30/12/2010, 07:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Cambiar imagen con CSS

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.
  #5 (permalink)  
Antiguo 30/12/2010, 07:44
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Cambiar imagen con CSS

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...

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:33.