Foros del Web » Programando para Internet » Javascript »

Mejoras para el Codigo JavaScript de un novato MENU CIRCULAR

 Estas en el tema de Mejoras para el Codigo JavaScript de un novato MENU CIRCULAR en el foro de Javascript en Foros del Web. Hola, este es mi primer mensaje en el foro y me presento, mi nombre es Abraham Alves y me gustaría pediros ayuda para mejorar un ...
  #1 (permalink)  
Antiguo 11/12/2013, 06:38
 
Fecha de Ingreso: diciembre-2013
Mensajes: 4
Antigüedad: 11 años
Puntos: 0
Mejoras para el Codigo JavaScript de un novato MENU CIRCULAR
Hola, este es mi primer mensaje en el foro y me presento, mi nombre es Abraham Alves y me gustaría pediros ayuda para mejorar un código HTML/CSS/Javascript que he escrito.
Mi código HTML/CSS crea un menú circular que al pasar por los diferentes puntos agranda cada parte de ese menú. Después he utilizado JavaScript para mostrar los títulos en otra capa diferente.

Pues bien, al ser novato mi código JavaScript es tremendamente largo y estoy seguro de que puede hacerse de forma mucho más práctica. También me gustaría que mantuviese el título actual y que cambie cada vez que seleccionas otro menú. Este es mi código:

Script:

Código Javascript: 
Ver original
  1. function visible0(){
  2.  
  3.     obj = document.getElementById("titulo0");
  4.     obj.style.display = "block";
  5.  
  6. }
  7.  
  8. function ocultar0(){
  9.     obj = document.getElementById("titulo0");
  10.     obj.style.display = "none";
  11.  
  12. }
  13. function visible1(){
  14.  
  15.     obj = document.getElementById("titulo1");
  16.     obj.style.display = "block";
  17.  
  18. }
  19.  
  20. function ocultar1(){
  21.     obj = document.getElementById("titulo1");
  22.     obj.style.display = "none";
  23.  
  24. }
  25. function visible2(){
  26.  
  27.     obj = document.getElementById("titulo2");
  28.     obj.style.display = "block";
  29.  
  30. }
  31.  
  32. function ocultar2(){
  33.     obj = document.getElementById("titulo2");
  34.     obj.style.display = "none";
  35.  
  36. }
  37. function visible3(){
  38.  
  39.     obj = document.getElementById("titulo3");
  40.     obj.style.display = "block";
  41.  
  42. }
  43.  
  44. function ocultar3(){
  45.     obj = document.getElementById("titulo3");
  46.     obj.style.display = "none";
  47.  
  48. }
  49. function visible4(){
  50.  
  51.     obj = document.getElementById("titulo4");
  52.     obj.style.display = "block";
  53.  
  54. }
  55.  
  56. function ocultar4(){
  57.     obj = document.getElementById("titulo4");
  58.     obj.style.display = "none";
  59.  
  60. }
  61. function visible5(){
  62.  
  63.     obj = document.getElementById("titulo5");
  64.     obj.style.display = "block";
  65.  
  66. }
  67.  
  68. function ocultar5(){
  69.     obj = document.getElementById("titulo5");
  70.     obj.style.display = "none";
  71.  
  72. }
  73. function visible6(){
  74.  
  75.     obj = document.getElementById("titulo6");
  76.     obj.style.display = "block";
  77.  
  78. }
  79.  
  80. function ocultar6(){
  81.     obj = document.getElementById("titulo6");
  82.     obj.style.display = "none";
  83.  
  84. }
  85. function visible7(){
  86.  
  87.     obj = document.getElementById("titulo7");
  88.     obj.style.display = "block";
  89.  
  90. }
  91.  
  92. function ocultar7(){
  93.     obj = document.getElementById("titulo7");
  94.     obj.style.display = "none";
  95.  
  96. }
  97. function visible8(){
  98.  
  99.     obj = document.getElementById("titulo8");
  100.     obj.style.display = "block";
  101.  
  102. }
  103.  
  104. function ocultar8(){
  105.     obj = document.getElementById("titulo8");
  106.     obj.style.display = "none";
  107.  
  108. }

HTML:

Código HTML: 
Ver original
  1. <body>
  2.     <div id="wrapper">
  3.         <h1>Sumérgete en el movimiento de la vida</h1>
  4.             <div id="logo">
  5.                 <img src="images/logo.png">
  6.             </div>
  7.             <div class="nar" onmouseover="visible0()"  onmouseout="ocultar0()">
  8.                 <a href="#"></a>
  9.             </div>
  10.              <div class="amari" onmouseover="visible1()"  onmouseout="ocultar1()">
  11.                 <a href="#"></a>
  12.             </div>
  13.              <div class="rojo" onmouseover="visible2()"  onmouseout="ocultar2()">
  14.                 <a href="#"></a>
  15.             </div>
  16.             <div class="azul" onmouseover="visible3()"  onmouseout="ocultar3()">
  17.                 <a href="#"></a>
  18.             </div>
  19.             <div class="verde" onmouseover="visible4()"  onmouseout="ocultar4()">
  20.                 <a href="#"></a>
  21.             </div>
  22.             <div class="amari2" onmouseover="visible5()"  onmouseout="ocultar5()">
  23.                 <a href="#"></a>
  24.             </div>
  25.             <div class="lila" onmouseover="visible6()"  onmouseout="ocultar6()">
  26.                 <a href="#"></a>
  27.             </div>
  28.             <div class="mor" onmouseover="visible7()"  onmouseout="ocultar7()">
  29.                 <a href="#"></a>
  30.             </div>
  31.             <div class="rojo2" onmouseover="visible8()"  onmouseout="ocultar8()">
  32.                 <a href="#"></a>
  33.             </div>
  34.  
  35.         <div id="titulo0">Historia</div>
  36.         <div id="titulo1">Política</div>
  37.         <div id="titulo2">Salud</div>
  38.         <div id="titulo3">Alimentación</div>
  39.         <div id="titulo4">Energía y Medio ambiente</div>
  40.         <div id="titulo5">Economía</div>
  41.         <div id="titulo6">Desempleo</div>
  42.         <div id="titulo7">Juventud</div>
  43.         <div id="titulo8">Desarrollo Mundial</div>
  44.     </div>

CSS:

Código CSS: 
Ver original
  1. /* WRAPPER */
  2. #wrapper { width:1024px; margin:40px auto;}
  3. #logo img {
  4. width: 420px;
  5. height: 420px;
  6. margin-top: -210px;
  7. margin-left: -210px;
  8. left: 50%;
  9. top: 50%;
  10. position: absolute;
  11. }
  12.  
  13. /* MANOS */
  14.     /* Naranja */
  15.   .nar { margin: 0px auto;
  16.     position: absolute;
  17.     width: 130px;
  18.     height: 130px;
  19.     margin-top: -222px;
  20.     margin-left: -55px;
  21.     left: 50%;
  22.     top: 50%;
  23.     }
  24.   .nar a { display: block;
  25.     height: 100%;
  26.     width: 100%;
  27.     background: none
  28.     }
  29.   .nar a:hover { background: url(../images/manos/nar.png) no-repeat center bottom;
  30.     background-size: 130px 130px;
  31.     }
  32.     /* Amarillo */
  33.     .amari { margin: 0px auto;
  34.     position: absolute;
  35.     width: 130px;
  36.     height: 130px;
  37.     margin-top: -182px;
  38.     margin-left: 38px;
  39.     left: 50%;
  40.     top: 50%;
  41.     }
  42.   .amari a { display: block;
  43.     height: 100%;
  44.     width: 100%;
  45.     background: none
  46.     }
  47.   .amari a:hover { background: url(../images/manos/amari.png) no-repeat center bottom;
  48.     background-size: 130px 130px;
  49.     }
  50.     /* Rojo */
  51.     .rojo { margin: 0px auto;
  52.     position: absolute;
  53.     width: 130px;
  54.     height: 130px;
  55.     margin-top: -87px;
  56.     margin-left: 83px;
  57.     left: 50%;
  58.     top: 50%;
  59.     }
  60.   .rojo a { display: block;
  61.     height: 100%;
  62.     width: 100%;
  63.     background: none
  64.     }
  65.   .rojo a:hover { background: url(../images/manos/rojo.png) no-repeat center bottom;
  66.     background-size: 130px 130px;
  67.     }
  68.     /* Azul */
  69.     .azul { margin: 0px auto;
  70.     position: absolute;
  71.     width: 130px;
  72.     height: 130px;
  73.     margin-top: 18px;
  74.     margin-left: 60px;
  75.     left: 50%;
  76.     top: 50%;
  77.     }
  78.   .azul a { display: block;
  79.     height: 100%;
  80.     width: 100%;
  81.     background: none
  82.     }
  83.   .azul a:hover { background: url(../images/manos/azul.png) no-repeat center bottom;
  84.     background-size: 130px 130px;
  85.     }
  86.     /* Verde */
  87.     .verde { margin: 0px auto;
  88.     position: absolute;
  89.     width: 130px;
  90.     height: 130px;
  91.     margin-top: 75px;
  92.     margin-left: -28px;
  93.     left: 50%;
  94.     top: 50%;
  95.     }
  96.   .verde a { display: block;
  97.     height: 100%;
  98.     width: 100%;
  99.     background: none
  100.     }
  101.   .verde a:hover { background: url(../images/manos/verde.png) no-repeat center bottom;
  102.     background-size: 130px 130px;
  103.     }
  104.     /* Amarillo 2 */
  105.     .amari2 { margin: 0px auto;
  106.     position: absolute;
  107.     width: 130px;
  108.     height: 130px;
  109.     margin-top: 70px;
  110.     margin-left: -132px;
  111.     left: 50%;
  112.     top: 50%;
  113.     }
  114.   .amari2 a { display: block;
  115.     height: 100%;
  116.     width: 100%;
  117.     background: none
  118.     }
  119.   .amari2 a:hover { background: url(../images/manos/amari2.png) no-repeat center bottom;
  120.     background-size: 130px 130px;
  121.     }
  122.     /* Lila */
  123.     .lila { margin: 0px auto;
  124.     position: absolute;
  125.     width: 130px;
  126.     height: 130px;
  127.     margin-top: -7px;
  128.     margin-left: -205px;
  129.     left: 50%;
  130.     top: 50%;
  131.     }
  132.   .lila a { display: block;
  133.     height: 100%;
  134.     width: 100%;
  135.     background: none
  136.     }
  137.   .lila a:hover { background: url(../images/manos/lila.png) no-repeat center bottom;
  138.     background-size: 130px 130px;
  139.     }    
  140.     /* Morado */
  141.     .mor { margin: 0px auto;
  142.     position: absolute;
  143.     width: 130px;
  144.     height: 130px;
  145.     margin-top: -108px;
  146.     margin-left: -218px;
  147.     left: 50%;
  148.     top: 50%;
  149.     }
  150.   .mor a { display: block;
  151.     height: 100%;
  152.     width: 100%;
  153.     background: none
  154.     }
  155.   .mor a:hover { background: url(../images/manos/mor.png) no-repeat center bottom;
  156.     background-size: 130px 130px;
  157.     }     
  158.     /* Rojo 2 */
  159.     .rojo2 { margin: 0px auto;
  160.     position: absolute;
  161.     width: 130px;
  162.     height: 130px;
  163.     margin-top: -192px;
  164.     margin-left: -155px;
  165.     left: 50%;
  166.     top: 50%;
  167.     }
  168.   .rojo2 a { display: block;
  169.     height: 100%;
  170.     width: 100%;
  171.     background: none
  172.     }
  173.   .rojo2 a:hover { background: url(../images/manos/rojo2.png) no-repeat center bottom;
  174.     background-size: 130px 130px;
  175.     }         
  176.  
  177.     /* Titulos */
  178.  
  179. #titulo0, #titulo1, #titulo2, #titulo3, #titulo4, #titulo5, #titulo6, #titulo7, #titulo8
  180. {
  181. background:none;
  182. position:absolute;
  183. display: block; 
  184. text-decoration: none; 
  185. margin: 0 0 30px 0; 
  186. font: italic 45px 
  187. Georgia, Times, Serif; 
  188. text-align: center; 
  189. color: #bfe1f1; 
  190. text-shadow: 0px 2px 6px #333;
  191. width:100px;
  192. height:100px;
  193. top:50%;
  194. left:50%;
  195. margin-top:-270px;
  196. margin-left:-80px;
  197. display:none;
  198. }

No es un código muy complicado pero creo que ese script puede mejorarse mogollón y hacerlo mucho mas pequeño. Espero vuestros consejos y os agradezco de antemano la ayuda ;)
Última edición por pzin; 11/12/2013 a las 06:42 Razón: formato código
  #2 (permalink)  
Antiguo 12/12/2013, 05:10
Avatar de Crazylegs  
Fecha de Ingreso: septiembre-2013
Ubicación: Barcelona
Mensajes: 74
Antigüedad: 11 años, 3 meses
Puntos: 14
Respuesta: Mejoras para el Codigo JavaScript de un novato MENU CIRCULAR
Pues sí, tu código javascript se puede reducir a:
Código Javascript: 
Ver original
  1. function visible(numero){
  2.  
  3.     obj = document.getElementById("titulo"+numero);
  4.     obj.style.display = "block";
  5.  
  6. }
  7.  
  8. function ocultar(numero){
  9.     obj = document.getElementById("titulo"+numero);
  10.     obj.style.display = "none";
  11.  
  12. }

Y en el HTML pasar por parámetro el número en los eventos onmouseover y onmouseout.

Lo de que se mantenga el título actual, puedes hacerlo de distintas formas, tal y como tienes montado el HTML, podrías eliminar la función ocultar del onmouseout y al final de la función visible guardar en una variable global el numero del div mostrado, para si ocultarlo al principio de dicha función.
__________________
¡Mira mis tutoriales web!
  #3 (permalink)  
Antiguo 12/12/2013, 06:16
 
Fecha de Ingreso: diciembre-2013
Mensajes: 4
Antigüedad: 11 años
Puntos: 0
Respuesta: Mejoras para el Codigo JavaScript de un novato MENU CIRCULAR
Muchísimas gracias, funciona a la perfección y esta muy resumido. Gracias por la ayuda :)

Etiquetas: css, html, javascript+html
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:56.