lograr celdas hexagonales

intiweb · #1 (**permalink**) 09/03/2011, 13:15

hola, tengo un proyecto de un juego de internet donde la idea es un tablero tipo de agedrez pero donde las celdas tienen que ser hexagonales,
se puede lograr esto con html o todo tiene que ser con lineas horizontales y verticales ?.
o sea la idea seria hacer por ejemplo una tabla con esa forma.

jomaruro · #2 (**permalink**) 09/03/2011, 13:26

Hola:

Con HTML no puedes hacerlo, quizá podrías poner una imagen como fondo con CSS.

Saludos.

sanxuan · #3 (**permalink**) 09/03/2011, 15:41

Lo mas aproximado sería usar un mapa de imágenes <map> que permite definir áreas irregulares que sirven de enlace.
El enlace puede usarse para ejecutar un script cuando se pulsa, que por ejemplo puede hacer cambiar cualquier elemento de la página.
Usando capas <div> puedes situar imágenes una sobre otra con posición absoluta. Sobre ellas puedes situar el mapa de imágenes con una imagen transparente.
Al pulsar en cada una de las áreas hexagonales cambiarías las imágenes del fondo.
Podría servir para un juego de mesa con tablero.

intiweb · #4 (**permalink**) 10/03/2011, 10:02

si es verdad, no había pensado en los map, podrían servir pero tendría que ver bien como armar las imágenes de fondo porque como serian cuadradas al cambiar una me obliga a cambiar las de al lado para que se adapte.
igual es buena idea gracias pensare bien la cosa, si no lo hago cuadrado y listo

caricatos · #5 (**permalink**) 10/03/2011, 11:48

Hola:

Si tienes el tablero con colores planos, puedes ayudarte de esta página: Capturar áreas en imágenes. Ahí mismo tienes un ejlemplillo...

Saludos

sanxuan · #6 (**permalink**) 10/03/2011, 12:20

Si usas imágenes con fondo transparente (gif o png) no necesitarás hacer ningún cambio en las imágenes de al lado.

tuteba · #7 (**permalink**) 10/03/2011, 19:07

En HTML5 está integrado el lenguaje SVG, con él podés dibujar las figuras que quieras, con fondos y texto en base a un sistema de coordenadas.

tuteba · #8 (**permalink**) 10/03/2011, 19:11

Ejemplo de hexagono en SVG dentro de HTML

Guardá esto dentro de un archivo y mirálo (quizás necesites una versión moderna del navegador que uses)

Código HTML:

<html>
<svg>
<polygon points="100,100 50,200 100,300 200,300 250,200, 200,100"/>
</svg>
</html>

intiweb · #9 (**permalink**) 13/03/2011, 22:25

muy bueno lo de tuteba, la verdad voy a investigar mas sobre esa tecnologia a ver que onda.

no puedo usar imagenes con fondos transparente por lo que tendria que modificar lo de al lado tamb :(.
y los fondos son texturados pero le voy a echar un vistazo al lin de caricatos.

.
pero la opcion mas correcta parece la primera de SVG con cordenadas. investigare por ese lado.

GRACIAS MAESTROS!!
este foro es una genialidad, se aprende mucho aqui

ContactarNET · #10 (**permalink**) 14/03/2011, 01:43

Yo te recomendaria que lo hagas con la opcion que te dieron arriba de usar maps, al usar html5 algunos navegadores como Internet Explorer no lo reconocen, en su version 9 integrarian HTML5 y CSS3, falta poco para que salga, pero tenes que tener en cuenta que tampoco se va a utilizar de una, van a pasar unos meses para que se actualize el navegador en la mayoria de los usuarios.

Hacelo de la manera antigua, asi que aunque cueste mas, y tengas mas problemas, te aseguras que va a funcionar 100%.

intiweb · #11 (**permalink**) 14/03/2011, 21:55

si, es verdad estuve probando y no es eficaz en los distintos navegadores, aunque no es mala idea para no descartarla dentro de un tiempo ya podria ser totalmente util.
voy a optar por los gif o los map..