Foros del Web » Creando para Internet » CSS »

a:hover sobre imagenes

Estas en el tema de a:hover sobre imagenes en el foro de CSS en Foros del Web. buenos dias, estoy trabajando en una web para subir fotos y mostrarlas, cuando las fotos estan listas para ser vistas, uno pasa el mouse por ...
  #1 (permalink)  
Antiguo 14/01/2010, 07:15
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
a:hover sobre imagenes

buenos dias, estoy trabajando en una web para subir fotos y mostrarlas, cuando las fotos estan listas para ser vistas, uno pasa el mouse por encima y la imagen se agranda un poco para poder dar una mejor vista previa, pero el problema es que no se como hacer para que la imagen se muestre en un solo lugar y no cambie de posicion dependiendo de los diferentes tamaños de pantallas, yo lo acomode a mi resolucion, pero cuando lo probe en la casa de un amigo la imagen aparecia perdida abajo de todo y se veia la mitad. Lo que quiero saber es como dejar todas las imagenes fijas en un mismo lugar, con un contenedor? la verdad no se como hacerlo!
aca les dejo el codigo para que vean mejor a lo que me refiero.

index.php

Código PHP:
<a href="<?php echo $direccion ?>"  class="galeria"><img src="<?php echo $direccion ?>" height="120" width="100" /><span><img src="<?php echo $direccion ?>" width="370" height="370" /><br /><?php echo $direccion ?></span></a>
css.css


Código:
.galeria span{ 
position: absolute;
background-color:#CFE983;
padding: 5px;
left: -1000px;
border: 1px dashed #000000;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;

}


.galeria:hover span{ 
visibility: visible;
top: 200px;
left: 700px; 
z-index: 50;
}
Un abrazo
  #2 (permalink)  
Antiguo 14/01/2010, 07:58
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: a:hover sobre imagenes

Hola
Si puedes deja además un link para ver el problema en vivo y en directo.
saludos

Edito: el cambio de posición se debe a que no cambia de posición ya que lo tienes con posicion absoluta
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 14/01/2010 a las 08:03
  #3 (permalink)  
Antiguo 14/01/2010, 08:11
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: a:hover sobre imagenes

subo la web un toke para que la veas, ahora agrego un par de imagenes ya que tiene sola una de prueba jaja! la direccion es www.denenasargentina.comoj.com.

estoy teniendo problemitas para acceder a la bd pero ya te pongo mas fotos para q veas mejor el problema.
  #4 (permalink)  
Antiguo 14/01/2010, 08:21
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: a:hover sobre imagenes

Ya subi la pagina y le puse mas imagenes para que puedas ver mejor el problema
  #5 (permalink)  
Antiguo 14/01/2010, 08:25
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: a:hover sobre imagenes

No tiene nada que ver con el problema pero tienes algo mal:
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Fotos</title>
  6. <link href="css/css.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9.  
  10. <body class="twoColHybLtHdr">
  11.  
  12.  
  13.  
  14.  
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <html xmlns="http://www.w3.org/1999/xhtml">
  17. <head>
  18. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  19. <title>Documento sin t&iacute;tulo</title>
  20. </head>
  21.  
  22. <body>
  23.  
  24. </body>
  25. </html>
me parece que deberias borrar desde el segundo <doctype...
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 14/01/2010, 09:27
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: a:hover sobre imagenes

Primero revisa todo el codigo,
la estructura debe ser:
Código HTML:
Ver original
  1. .....
  2. </head>
  3. ....
  4. </body>
  5. </html>
Y no se pueden repetir esas etiquetas que te puse.
Ahora sobre las imagenes, el problema es que al estar en posición absoluta, tal como está, dicha posición tiene por referencia la pantalla, por eso se mueve segun la resolucion.
Para evitar esto agregale position relative a .twoColHybLtHdr #container:
Código CSS:
Ver original
  1. .twoColHybLtHdr #container {
  2.     width: 80&#37;;  /* esto creará un contenedor con el 80% del ancho del navegador */
  3.     background: #FFFFFF;
  4.     margin: 0 auto 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
  5.     border: 1px solid #000000;
  6.  
  7.    
  8. position: relative;
  9.     }
De esta manera la referencia será la esquina superior del contenedor y dado que esta todo dentro de él, no cambiara de lugar con respecto al resto de los elementos.
También cambie un poco el css de las imagenes, prueba y me dices:
Código CSS:
Ver original
  1. .thumbnail span{ /*CSS for enlarged image*/
  2.     position: absolute;
  3.     background-color:#CFE983;
  4.     padding: 5px;
  5.     left: 350px;
  6.     top: 200px;
  7.     border: 1px dashed #000000;
  8.     visibility: hidden;
  9.     color: black;
  10.     text-decoration: none;
  11.     text-align:center;
  12.     display: block;
  13.  
  14. }
  15.  
  16.  
  17. .thumbnail:hover span{ /*CSS for enlarged image*/
  18.     visibility: visible;
  19.     z-index: 50;
  20. }

con esto la ubicación solo la tenes que manejar desde .thumbnail span, ya que no hace falta volver a ubicarla desde .thumbnail:hover span.

saludos
PD:
Podrias usar algun tipo de lightbox para ver las imagenes
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 14/01/2010 a las 09:36
  #7 (permalink)  
Antiguo 15/01/2010, 06:26
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: a:hover sobre imagenes

C2am muchas gracias por la ayuda que me diste!

sobre el tema de las etiquetas
Código PHP:
<html>
<
head>
</
head>
<
body>
</
body>
</
html
el error que cometi fue que me olvide de borar en uno de mis require todas esas etiquetas! por eso se ven duplicadas jaja.

sobre lo del css me diste una mano grande! ahora lo que me queda es una pregunta mas... al achicar y aumentar el tamano desde el navegador (Ver -> Tamaño -> Aumentar/Reducir) se me desplazan las imagenes miniatura, eso la verdad no se como mantenerlo. Quiero que se vean de a 3 por linea (en php lo que hize fue poner un contador que al llegar a 3 mande un <br />, veo que esa no es una buena solucion)

Deberia hacer un contenedor para la parte de las imagenes miniaturas y otro para cuando se muestra la imagen un poco mas grande?

sobre lo de utilizar lightbox la verdad es una muy buena idea, pero lo que por ahora estoy buscando es aprender css, si bien estoy haciendo mucho copy&paste&lectura&modificacion me permite por ahi conocer un poco mas cosas de css que no hubiera visto en ningun manual de los que encontre rondando por internet.

Nos vemos, Un abrazo
  #8 (permalink)  
Antiguo 15/01/2010, 07:42
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: a:hover sobre imagenes

hola

Cita:
Deberia hacer un contenedor para la parte de las imagenes miniaturas y otro para cuando se muestra la imagen un poco mas grande?
Sobre un contenedor para las miniaturas puede ser, y flotando las miniaturas de manera que se vayan ubicando una al lado de la otra.
Para que sean tres, tendrías que ponerle un width al contenedor de manera que solo entren tres, y con eso bastaría, y te ahorrarías el codigo php. Ah, y si a este contenedor le pones position relative, la ampliacion deberías ajustarla a este nuevo div, en vez del "div contenedor general".
Prueba a ver que te sale.
Te dejo un link de ayuda : www.librosweb.es , por las dudas.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #9 (permalink)  
Antiguo 15/01/2010, 07:53
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: a:hover sobre imagenes

Hola C2am, ya me habia puesto a hacer el contenedor para las imagenes miniaturas y quedo de 10! (le puse un fondo negro para ver el tamaño) ahora solo resta ponerle un contenedor al "visor".

Ese link ya lo habia visto y me baje los libros! se agredece igual la intencion! (Mi problema es que padezco de falta de atencion jaja! Mal lo mio)

un abrazo y gracias por todo!

Etiquetas: imagenes
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 20:08.