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

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

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