Foros Programación Cliente

Alternativa javascript a menu en flash

7 7 Respuestas Martes 29 de noviembre, 2011
Hola!
Estoy remodelando mi portfolio actual y uno de los puntos que me ha hecho decidirme al cambio es el de prescindir del uso de flash para el menú:



Mi idea es, a ser posible, buscar algo que sea capaz de mantener la zona activa tanto al pasar por encima de la palabra como por encima de su respectiva área.

Aquí podéis verlo funcionando para haceros mejor a la idea.

¿Se os ocurre una forma (jquery, etc) con la que pueda lograr hacer algo similar?

Estoy barajando utilizar mapas de imagen para delimitar las zonas y javascript para realizar los cambios de imagen (blanco/rojo), pero no estoy seguro de que sea lo más conveniente.

Gracias por adelantado! :)
Registrado desde 04/11/08
Número de posts: 151
  • Avatar de Höher Höher Registrado desde 28/06/07 / Número de posts: 454
    Diría que tienes dos opciones válidas hoy en día:
    1) dentro de una etiqueta canvas y crearlo con js
    2) crearlo con svg manipulando la interacción con js

    Svg seguramente te será mas facil para implementar. Para ayudar a crearte un mapeado con svg ,tienes recursos con las libreria de jQuery o también con la de Raphaël.
    Publicado hace 6 meses
  • Avatar de makinete makinete Registrado desde 16/01/08 / Número de posts: 95
    Hola Cucho,

    ¿Has pensado en Map ? con Html y css vaya

    Un saludo
    http:www.codigonexo.com
    http:www.codigonexo.com/blog
    @codigonexo
    Publicado hace 6 meses
  • Avatar de cucho cucho Registrado desde 04/11/08 / Número de posts: 151
    Höher, gracias por los enlaces! No había pensado en el svg y creo que tiene bastantes posibilidades... investigaré por ahí! :)

    Makinete, había pensado algo mixto como este ejemplo, aunque lo ideal es que me permitiese interactuar con elementos tanto dentro como fuera del mapa, como este. Como nunca me he puesto con algo parecido dejo mi futuro en mano de los consejos de los expertos... así que soy todo oídos! :)

    Publicado hace 6 meses
  • Avatar de cucho cucho Registrado desde 04/11/08 / Número de posts: 151
    Aquí el segundo link, que se me escapó la ruta!
    Publicado hace 6 meses
  • Avatar de cucho cucho Registrado desde 04/11/08 / Número de posts: 151
    Pues nada, trabajo completado! Aquí va un breve resumen por si alguien lo necesita:

    - Tracé las distintas áreas de la imagen con Illustrator
    - De ahí a inkscape, convirtiendo las curvas en rectas y exportándolo como SVG plano
    - Luego, para sacar las coordenadas de cada uno de los mapas, la mejor opción que encontré es esta: inkscapemap 0.6 modified
    - Y, una vez en la web, para interactuar con cada una de esas áreas me basé en el plugin jquery maphilight con algunas modificaciones. Es relativamente sencillo, tiene bastantes ejemplos y mucho potencial a la hora de configurar el funcionamiento.

    Espero que a alguien le sea de utilidad!
    Publicado hace 6 meses
  • Avatar de jacobo rus jacobo rus Registrado desde 10/05/07 / Número de posts: 127
    No conocía inkscapemap, muy bueno
    ··························································
    Jacobo @ x.a.r.o.p.e
    Publicado hace 6 meses
  • Avatar de makinete makinete Registrado desde 16/01/08 / Número de posts: 95
    Yo no conocía el maphilight muy bueno!
    http:www.codigonexo.com
    http:www.codigonexo.com/blog
    @codigonexo
    Publicado hace 6 meses