Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: L0Ko en 21 Noviembre 2012, 04:25 am



Título: Como hacer mapa de edificio dinámico?
Publicado por: L0Ko en 21 Noviembre 2012, 04:25 am
Hola les cuento, necesito hacer el plano de las instalaciones de un edificio de una planta, para al ingresar al sitio web vea las instalaciones y la información al respecto de cada sección.
El caso esta en que no tengo idea de como hacerlo y en que software realizar el plano pues me piden una imagen 3D como la de abajo (Aclaro no es un recorrido virtual) y al poner el mouse diga algo como oficina1, oficina2 etc.
se debera de ver una imagen 3D
(http://www.google.com.mx/url?source=imglanding&ct=img&q=http://1.bp.blogspot.com/_1-RASTvBeYY/TCUEsGRJxEI/AAAAAAAAAmI/zZ7wn-MUQXE/s1600/planos-3d-plantas-1.jpg&sa=X&ei=ckisUKHDDuaS2QX1pIG4Cg&ved=0CAwQ8wc&usg=AFQjCNG9RTKGyPuAD1nbrIAJXS4tVMoXKg)

y aca un jemplo mas del plano  http://www.xochitla.org.mx/varios/panoramicas/mapa.html
(http://www.xochitla.org.mx/images/varios/mapa-recorrido-virtual.jpg)


Título: Re: Como hacer mapa de edificio dinámico?
Publicado por: #!drvy en 21 Noviembre 2012, 09:57 am
Hola,

De software (aunque no ande mucho por este tema) puedes probar con Google SketchUP o Microsoft Office Visio.

Para crear los mapas, puedes utilizar el tag (etiqueta) html "<map>"

Un ejemplo de su implementación:
Código
  1. <img src="planetas.gif" width="145" height="126" alt="Planetas" usemap="#planetmap">
  2.  
  3. <map name="planetmap">
  4.  <area shape="rect" coords="0,0,82,126" href="sol.htm" alt="Sol">
  5.  <area shape="circle" coords="90,58,3" href="mercurio.htm" alt="Mercurio">
  6.  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
  7. </map>

Demo en vivo. (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap)

Y para añadirle ciertos efectos puedes utilizar la librería jQuery (http://jquery.com/) y sus efectos (o algún plugin adicional).

Adicionalmente si no quieres usar <map>, puedes meter una imagen y utilizar la técnica de CSS Sprites (http://www.kabytes.com/programacion/tutorial-basico-sobre-css-sprite/).


Saludos