Alternativa javascript a menu en flash
4 seguidores
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! :)
codigonexo
Yo no conocía el maphilight muy bueno!
jacoborus
No conocía inkscapemap, muy bueno
chuchonieto
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!
chuchonieto
Aquí el segundo link, que se me escapó la ruta!
chuchonieto
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! :)
codigonexo
Hola Cucho,
¿Has pensado en Map ? con Html y css vaya
Un saludo
smalonso Mod
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.