Foro - Perl en Español

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.

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

En esta página tienes un ejemplo parecido, hecho con tablas.

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:



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!

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.

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

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.

Buenas noches, solamente quería consultar con ustedes cuál es el enlace al que se refiere la página. Muchas gracias por esto.

Lo siento, la página enlazada ya no existe (el cliente mandó quitarla hace dos años).