• Publicidad

Como controlar la posición de las imágenes en la página HTML

Preguntas y comentarios relacionadas con HTML y CSS.

Como controlar la posición de las imágenes en la página HTML

Notapor rookie » 2006-08-29 10:34 @482

Saludos a todos.

Cómo puedo distribuir 9 imágenes (con forma circular) en mi página web de tal manera de que la primera y más grande de todas, quede en el centro de la página y las demás alrededor de ella (como en un diagrama de esferas).
He visto algunos manuales pero solo me dicen cómo distribuir la posición vertical y como controlar el tamaño de la imagen, pero no sé cómo distribuir mis imágenes para que tenga el aspecto que les he platicado.

Les agradezco su ayuda..
Hasta pronto.
rookie
Perlero nuevo
Perlero nuevo
 
Mensajes: 41
Registrado: 2006-03-01 18:48 @825

Publicidad

Notapor kidd » 2006-08-29 10:59 @499

Hola:

Se me ocurren tres maneras para lograr esto, cada una con sus pros y contras.

1. Con tablas
Puedes usar tablas para acomodar las imagenes, te recomiendo leas el siguiente artículo que te muestra todos los atributos que tienes a la mano con las tablas:
http://www.w3.org/TR/html4/struct/tables.html
PROS: Si logras acomodar bien tu tabla, se va a ver bien en cualquier navegación e incluso en cualquier resolución de pantalla.
CONTRAS: Por lo que buscas, puede resultar muy complicado realizar esto.


2. Con posiciones absolutas
Usando un poco de CSS y algunos DIV, pues posicionar cualquier cosa en el lugar que quieras. Aquí te dejo una liga para que veas más acerca de esto:
http://www.yourhtmlsource.com/styleshee ... ayout.html
PROS: Puede resultar muy sencillo acomodar lo que quieres y exactamente como lo quieres.
CONTRAS: Lo más seguro es que no se vea igual en todos los navegadores, y la resolución de pantalla va a ser un verdadero problema.


3. Un image map
Esto es lo que yo te recomiendo y lo que normalmente se usa en este tipo de casos. Lo que haces es crear un gráfico grandote en donde pones todas las imagenes exactamente como quieras que se vean. Después ya sea que cortes en pedazos el gráfico y los acomodes con una tabla, o que guardes el gráfico en un solo archivo y después usando el MAP pongas las links correspondientes a cada uno. Igual aquí te dejo unos artículos que te muestran como lograrlo:
http://www.kasparius.com/nonflash/tutorial/tut1.htm
http://www.lissaexplains.com/fun6.shtml


Saludos
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México

Notapor explorer » 2006-08-29 13:35 @608

En esta página tienes un ejemplo parecido, hecho con tablas.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Notapor rookie » 2006-08-30 13:00 @583

Saludos a todos!

He solucionado el problema utilizando divs y CSS manejando la propiedad position y colocando la cantidad de pixeles a left y top... asi:

Sintáxis: [ Descargar ] [ Ocultar ]
  1. <div style="position: relative; left: 300px; top: 10px; width: 100px; height: 300px;> 
  2. <img src="../mi_imagen.png"> 
  3. </div> 


Incluso gracias a esta propiedad puedo "sobreponer" imagenes, es decir, colocar una imagen sobre otra (muy util), lo cual no es posible con tablas.

Gracias por la ayuda y hasta pronto!
rookie
Perlero nuevo
Perlero nuevo
 
Mensajes: 41
Registrado: 2006-03-01 18:48 @825

rollover usando image map ??

Notapor rookie » 2006-08-30 20:59 @916

SALudos...

Tal y como me lo advirtieron .. hay problemas al abrir la pagina con distintas resoluciones, ya que los divs se "descuadran", hay alguna manera de solucionarlo???

Si uso image_map, puedo hacer que en determinada coordenada que yo le indique, aparezca una imagen o color de fondo al pasar el mouse , es decir un rollover???

Gracias y hasta luego.
rookie
Perlero nuevo
Perlero nuevo
 
Mensajes: 41
Registrado: 2006-03-01 18:48 @825

Notapor kidd » 2006-08-30 23:20 @014

Hola:

Si, con el image map no debes de tener problemas pues funciona con coordenadas de una imagen que tiene el mismo tamaño sin importar la resolución de pantalla.

En la siguiente página verás un ejemplo de una imagen cortada y con rollover, ve como está el código y te dará una idea de como lograr lo que quieres:
http://mexthings.com/


Saludos
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México

Notapor explorer » 2006-08-31 04:57 @248

El problema del tamaño de la resolución te lo vas a encontrar siempre: no sabrás, a priori, si el usuario está usando un monitor de 15 pulgadas de diagonal con una resolución de 800 por 600, uno de 21 pulgadas con una resolución de 1600x1200 o un teléfono móvil de 320x200.

En este momento, el número de internautas que tienen una resolución igual o superior a 1024 píxeles de ancho es del 65%, por lo que es recomendable trabajar a partir de ese tamaño. El de 800x600 se puede decir que pasó a la historia. Pero claro, cada vez más personas tienen teléfono móvil, PDA o usan ordenadores portátiles con pantallas de 12 pulgadas (o menos).

En esta página tienes un ejemplo hecho con capas. El truco está en una combinación de tabla y capas para conseguir que la imagen siempre esté en el centro, independientemente de la resolución de pantalla. Con la tabla podemos centrar el objeto verticalmente y con la capa, horizontalmente. Y para que todas las capas se muevan con respecto a la primera, son 'hijas' de ella (están contenidas en ella). También hay que prestar atención a la hoja de estilos, donde se indica la forma en que las capas definen su posición unas con respecto a otras.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cómo controlar la posición de las imágenes en la página

Notapor cjbustos » 2013-01-25 22:11 @966

Buenas noches, solamente quería consultar con ustedes cuál es el enlace al que se refiere la página. Muchas gracias por esto.
Avatar de Usuario
cjbustos
Perlero nuevo
Perlero nuevo
 
Mensajes: 2
Registrado: 2012-07-09 17:11 @757

Re: Cómo controlar la posición de las imágenes en la página

Notapor explorer » 2013-01-25 22:17 @970

Lo siento, la página enlazada ya no existe (el cliente mandó quitarla hace dos años).
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España


Volver a HTML

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados