3. [JavaScript][MEDIO] Menu 'Mac' en Javascript
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
« anterior próximo »
Páginas: [1]   Ir Abajo

[JavaScript][MEDIO] Menu 'Mac' en Javascript

  • 0 Respuestas
  • 1532 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado @ed33x

  • *
  • Underc0der
  • Mensajes: 107
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email

[JavaScript][MEDIO] Menu 'Mac' en Javascript

« en: Enero 21, 2011, 11:54:30 am »
Bueno hace unos minutos estaba programando cositas rapidas y pequeñas para llenar un poco las secciones de programacion web, y se me ocurrio esto jeje, como ya sabeis la barra de S.O mac cuando tu pones el cursor encima de una imagen se hace mas grande, cierto?

Pues lo mismo e echo en php y en js, quedaos con el codigo el diseño es nulo solo queria mostrar el diseño.

Código: Javascript
  1. <html>
  2. <head>
  3. <title>Menu 'MAC' eDeex</title>
  4. <style type="text/css">
  5. #Menu{ width:1000px; height:60px; float:left; text-align:center; margin:0 auto; }
  6. .Botones { width:150px; height:40px; float:left }
  7. </style>
  8. <script type="text/javascript">
  9. function menu(id,ancho,alto)
  10. {
  11.         document.getElementById(id).width=ancho;
  12.         document.getElementById(id).height=alto;
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <div id="Menu">
  18. <a class="Botones" href="#" onmouseout="menu('edeex','150','40');" onmousemove="menu('edeex','160','50');">
  19. <img id="edeex" src="img/edeex.png" border="0" width="150" height="40" />
  20. </a>
  21. <a class="Botones" href="#" onmouseout="menu('google','150','40');" onmousemove="menu('google','160','50');">
  22. <img id="google" src="img/google.png" border="0" width="150" height="40" />
  23. </a>
  24. <a class="Botones" href="#" onmouseout="menu('underc0de','150','40');" onmousemove="menu('underc0de','160','50');">
  25. <img id="underc0de" src="img/underc0de.png" border="0" width="150" height="40" />
  26. </a>
  27. <a class="Botones" href="#" onmouseout="menu('zone','150','40');" onmousemove="menu('zone','160','50');">
  28. <img id="zone" src="img/zone-h.png" border="0" width="150" height="40" />
  29. </a>
  30. <a class="Botones" href="#" onmouseout="menu('mac','150','40');" onmousemove="menu('mac','160','50');">
  31. <img id="mac" src="img/mac.png" border="0" width="150" height="40" />
  32. </a>
  33. </div>
  34. </body>
  35. </html>
  36.  
  37.  

Comentarme que tal! Quiero decir que tambien se puede hacer con hojas de estilo con "hover", espero que os guste.

Saludos
« Última modificación: Abril 18, 2014, 11:42:02 am por Expermicid »
En línea
Me cambie de messenger ahora es: [email protected]
Páginas: [1]   Ir Arriba
« anterior próximo »
 

¿Te gustó el post? COMPARTILO!



[HTML][MEDIO] Crea un banner con luces LED para tus perfiles con Mint Profile

Iniciado por godmurdoc

 Respuestas: 0
Vistas: 2364 		Último mensaje Julio 04, 2011, 04:04:02 pm
por godmurdoc
[HTML][MEDIO] Crear un reproductor de música utilizando HTML5

Iniciado por alexander1712

 Respuestas: 0
Vistas: 1854 		Último mensaje Enero 26, 2013, 02:22:28 am
por alexander1712
[HTML][MEDIO] Juegos en HTML5 - Tutorial 1

Iniciado por martinanonymo

 Respuestas: 3
Vistas: 2848 		Último mensaje Julio 16, 2013, 11:55:52 pm
por Røøt.exE
[JavaScrpit][MEDIO] Efecto Nieve

Iniciado por m3x1c0h4ck

 Respuestas: 2
Vistas: 2099 		Último mensaje Abril 13, 2010, 12:18:26 pm
por ProcessKill
[CSS][MEDIO] Personalizar los inputs y parecidos

Iniciado por Xt3mP

 Respuestas: 1
Vistas: 1887 		Último mensaje Mayo 15, 2011, 04:04:06 am
por arthusu