Foros del Web » Creando para Internet » HTML »

lograr celdas hexagonales

Estas en el tema de lograr celdas hexagonales en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/03/2011, 13:15
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años, 7 meses
Puntos: 5
lograr celdas hexagonales

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.
__________________
un saludo..... . . .
  #2 (permalink)  
Antiguo 09/03/2011, 13:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: lograr celdas hexagonales

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 09/03/2011, 15:41
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: lograr celdas hexagonales

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.
  #4 (permalink)  
Antiguo 10/03/2011, 10:02
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: lograr celdas hexagonales

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
__________________
un saludo..... . . .
  #5 (permalink)  
Antiguo 10/03/2011, 11:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: lograr celdas hexagonales

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 10/03/2011, 12:20
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: lograr celdas hexagonales

Si usas imágenes con fondo transparente (gif o png) no necesitarás hacer ningún cambio en las imágenes de al lado.
  #7 (permalink)  
Antiguo 10/03/2011, 19:07
 
Fecha de Ingreso: marzo-2011
Mensajes: 6
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: lograr celdas hexagonales

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.
  #8 (permalink)  
Antiguo 10/03/2011, 19:11
 
Fecha de Ingreso: marzo-2011
Mensajes: 6
Antigüedad: 6 años, 9 meses
Puntos: 0
De acuerdo Respuesta: lograr celdas hexagonales

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> 
  #9 (permalink)  
Antiguo 13/03/2011, 23:25
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: lograr celdas hexagonales

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
__________________
un saludo..... . . .
  #10 (permalink)  
Antiguo 14/03/2011, 02:43
Avatar de ContactarNET  
Fecha de Ingreso: septiembre-2010
Mensajes: 59
Antigüedad: 7 años, 2 meses
Puntos: 3
Respuesta: lograr celdas hexagonales

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%.
__________________
Contactar NET Diseño y Desarrollo web

CEO / Programación.
Gabriel.
  #11 (permalink)  
Antiguo 14/03/2011, 22:55
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años, 7 meses
Puntos: 5
Respuesta: lograr celdas hexagonales

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..
__________________
un saludo..... . . .

Etiquetas: celdas
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 08:58.