sarerac 0 Posted January 25, 2013 Share Posted January 25, 2013 Hola ! Estoy haciendo una web y quería hacer un menú sobre un texto con muchas palabras. Cuando pusiera el ratón sobre una, que se resaltaran otras desperdigadas por el cuerpo del texto. No sé si me he explicado bien. P.ej. Xxxxxxxxx. Xxxxxxxxxx. Xxxxxxxxx. Xxxxxxxxxx xxxxxxxxxx En AK, además de los encargos de terceros que podéis ver en nuestro book, también hacemos productos propios.Estos siempre son de dos tipos: Digitales o Físicos (normalmente con su versión digital). Los físicos tienen un precio, y si os gustan podéis pedírnoslos para que os los enviemos a casa. Pero los digitales son gratis (cobrar por algo que se puede copiar infinitas veces no tiene sentido) y podéis bajarlos directamente de nuestra web Las equis son las palabras del menú y las palabras en negrita y subrayadas las resaltadas. Alguien sabe por favor si es muy complicado hacerlo en Dreamweaver o si hay algún tutorial? Gracias! Quote Link to post Share on other sites
quim_ 0 Posted January 25, 2013 Share Posted January 25, 2013 Hola, Puedes probar con getElementsByClassName() en una función javascript onmouseover() el getElementsByClassName no funciona en IE 5,6,7,8 ... para variar ... saludos! Quote Link to post Share on other sites
sarerac 0 Posted January 27, 2013 Author Share Posted January 27, 2013 Gracias por contestar. La verdad es que necesitaba que no tenga problemas en ningún navegador. Os pongo un ejemplo a continuación: http://www.vivelatino.com.mx Quote Link to post Share on other sites
uhf 4 Posted January 28, 2013 Share Posted January 28, 2013 (edited) Hola sarerac: Adaptando y simplificando el ejemplo que has puesto de la web mexicana puedes llegar a este código simplificado que es fácil de manejar y de entender. Te pongo un enlace al ejemplo mio. Y aquí el mismo código (muy escueto) utilizado: <!doctype html> <html> <head> <style> body{ margin: 0; padding: 0; background: #b9b9b9; height: 100%; font-family: sans-serif; } #menus li { float: left; height: 40px; list-style-type: none; } #menus a { display: block; float: left; color: #6a6a6a; font-family: sans-serif; font-size: 36px; line-height: 36px; margin-right: 20px; text-decoration: none; height: 100%; } #menus a:hover, #menus a.selected { color: #fef8d2; } .band_list { width: 500px; clear: both; } .band_list a{ text-decoration: none; } .band_list li{ float: left; list-style-type: none; margin: 0 15px 5px 0; position: relative; height: 30px; line-height: 30px; z-index: 100; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } .band_list li.inactivo { opacity: 0.30; filter:alpha(opacity=30); } .band_list li.inactivo span { color: white; } .tiny{ font-size: 24px; color: white; } .color span{ color: teal; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <div id="menus"> <ul> <li><a href="#todas"class="selected">todos</a></li> <li><a href="#1">uno</a></li> <li><a href="#2">dos</a></li> <li><a href="#3">tres</a></li> <li><a href="#4">cuatro</a></li> </ul> </div> <ul class="band_list"> <li class="etiqueta_2 etiqueta"> <span class="tiny">Lorem</span> </li> <li class="etiqueta_1 etiqueta"> <span class="tiny">ipsum</span> </li> <li class="etiqueta_4 etiqueta"> <span class="tiny">dolor</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">sit</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">amet,</span> </li> <li class="etiqueta_1 etiqueta"> <span class="tiny">consectetur</span> </li> <li class="etiqueta_4 etiqueta"> <span class="tiny">adipiscing</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">elit.</span> </li> <li class="etiqueta_2 etiqueta"> <span class="tiny">Curabitur</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">sed</span> </li> <li class="etiqueta_1 etiqueta"> <span class="tiny">lacus</span> </li> <li class="etiqueta_4 etiqueta"> <span class="tiny">non</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">odio</span> </li> <li class="etiqueta_2 etiqueta"> <span class="tiny">pretium</span> </li> <li class="etiqueta_3 etiqueta"> <span class="tiny">ultrices</span> </li> </ul> <script> var currentDay = 'todas'; $('#menus a').click(function(e) { e.preventDefault(); var diaID = $(this).attr('href'); var dia = diaID.substring(1); var newDayID = '.etiqueta_'+dia; if(currentDay != dia) { $('#menus a').removeClass('selected'); $(this).addClass('selected'); currentDay = dia; switch(dia) { case 'todas': $('.etiqueta').removeClass('inactivo color'); break; case '1': case '2': case '3': case '4': $('.etiqueta:not('+newDayID+')').addClass('inactivo').removeClass('color'); $(newDayID).removeClass('inactivo').addClass('color'); break; } } }); </script> </body> </html> A partir de aquí es facil de adaptar a tus necesidades jugando con html/css y creo que funciona en cualquier navegador (sin comprobar). Ya nos contarás Un saludo. mon * No olvides ejecutarlo en un servidor para que cargue la librería jQuery. Edited January 28, 2013 by uhf Quote Link to post Share on other sites
Mr_Joker 0 Posted January 28, 2013 Share Posted January 28, 2013 Según entiendo, lo que quieres es que al pasar el mouse por el texto se activen las palabras que conforman el menú. Sería un onmouseover a lo bestia. He estado mirando porque también me interesa el efecto, pero estoy orientándome por lo que comento _quim Quote Link to post Share on other sites
uhf 4 Posted January 28, 2013 Share Posted January 28, 2013 Hola de nuevo: Si necesitas un efecto onmouseover, en mi ejemplo solo necesitas modificar esta línea así en el script $('#menus a').mouseover(function(e) { Ejemplo de onmouseover Espero que os sirva. ¡Saludos! mon Quote Link to post Share on other sites
sarerac 0 Posted January 28, 2013 Author Share Posted January 28, 2013 Uhf gracias de verdad era lo que estaba buscando, te lo agradezco sinceramente!!!!!!! Quote Link to post Share on other sites
Mr_Joker 0 Posted January 29, 2013 Share Posted January 29, 2013 Hola de nuevo: Si necesitas un efecto onmouseover, en mi ejemplo solo necesitas modificar esta línea así en el script $('#menus a').mouseover(function(e) { Ejemplo de onmouseover Espero que os sirva. ¡Saludos! mon Muy bueno. Eso es!! Quote Link to post Share on other sites
sarerac 0 Posted February 1, 2013 Author Share Posted February 1, 2013 Uhf por favor una última cosa es que quiero justificar todas las palabras y no lo consigo. Qué código debo modificar? Gracias!! Quote Link to post Share on other sites
Mr_Joker 0 Posted February 2, 2013 Share Posted February 2, 2013 1359757195[/url]' post='1052723030']Uhf por favor una última cosa es que quiero justificar todas las palabras y no lo consigo. Qué código debo modificar? Gracias!! S tienes el texto en un div o donde sea métete en style un text-align:justify Quote Link to post Share on other sites
uhf 4 Posted February 2, 2013 Share Posted February 2, 2013 Hola! :) No podías justificar el texto pues cada palabra era un elemento de una lista desordenada. He modificado el html para incluir todo el texto dentro de un div y cada elemento individual está dentro de un span. Y también se ha modificado el css para ajustarlo. Aquí tienes el ejemplo con texto justificado. Y aquí todo el código: <!doctype html> <html> <head> <style> body{ margin: 0; padding: 0; background: #b9b9b9; height: 100%; font-family: sans-serif; } #menus { margin-bottom: 30px; height: 50px; } #menus li { float: left; height: 40px; list-style-type: none; } #menus a { display: block; float: left; color: #6a6a6a; font-family: sans-serif; font-size: 36px; line-height: 36px; margin-right: 20px; text-decoration: none; height: 100%; } #menus a:hover, #menus a.selected { color: #fef8d2; } .lista { width: 500px; clear: both; text-align: justify; color: white; font-size: 24px; margin-left: 42px; } .lista a{ text-decoration: none; } .lista span{ -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; } .lista span.inactivo { color: #d9d9d9; } .lista span.color { color: teal; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <div id="menus"> <ul> <li><a href="#todas"class="selected">todos</a></li> <li><a href="#1">uno</a></li> <li><a href="#2">dos</a></li> <li><a href="#3">tres</a></li> <li><a href="#4">cuatro</a></li> </ul> </div> <div class="lista"> <span class="etiqueta_2 etiqueta">Lorem</span> <span class="etiqueta_1 etiqueta">ipsum</span> <span class="etiqueta_1 etiqueta">dolor</span> <span class="etiqueta_3 etiqueta">sit</span> <span class="etiqueta_3 etiqueta">amet,</span> <span class="etiqueta_1 etiqueta">consectetur</span> <span class="etiqueta_4 etiqueta">adipiscing</span> <span class="etiqueta_3 etiqueta">elit.</span> <span class="etiqueta">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span> <span class="etiqueta_2 etiqueta">Curabitur</span> <span class="etiqueta_3 etiqueta">sed</span> <span class="etiqueta_1 etiqueta">lacus</span> <span class="etiqueta">Vivamus vestibulum, purus nec pharetra dignissim, enim sapien interdum neque, vitae egestas erat turpis in tortor. Donec cursus eros a mi auctor pretium. Morbi est felis, aliquet sit amet egestas a, placerat id justo.</span> <span class="etiqueta_4 etiqueta">non</span> <span class="etiqueta_3 etiqueta">odio</span> <span class="etiqueta_2 etiqueta">pretium</span> <span class="etiqueta_3 etiqueta">ultrices</span> </div> <script> var currentDay = 'todas'; $('#menus a').mouseover(function(e) { e.preventDefault(); var diaID = $(this).attr('href'); var dia = diaID.substring(1); var newDayID = '.etiqueta_'+dia; if(currentDay != dia) { $('#menus a').removeClass('selected'); $(this).addClass('selected'); currentDay = dia; switch(dia) { case 'todas': $('.etiqueta').removeClass('inactivo color'); break; case '1': case '2': case '3': case '4': $('.etiqueta:not('+newDayID+')').addClass('inactivo').removeClass('color'); $(newDayID).removeClass('inactivo').addClass('color'); break; } } }); </script> </body> </html> También he cambiado un poco las transiciones utilizadas para que sean solo de color y no de trasparencia. Un saludo de nuevo. mon Quote Link to post Share on other sites
sarerac 0 Posted February 9, 2013 Author Share Posted February 9, 2013 Hola UHF!!! sabes si este archivo se podría integrar en una web con efecto parallax? Gracias Quote Link to post Share on other sites
uhf 4 Posted February 9, 2013 Share Posted February 9, 2013 Buenas sarerac: Estoy convencido que sí se puede. Pero "parallax" es más un concepto que una tecnología concreta. Se puede implementar de diferentes formas. Si pones un ejemplo del parallax en concreto (una web) y como/donde lo quieres integrar te podríamos contestar con más precisión. ¡Saludos! mon Quote Link to post Share on other sites
sarerac 0 Posted February 10, 2013 Author Share Posted February 10, 2013 (edited) Hola !! Copio el link donde se puede descargar el código el código de un parallax que me sirve de modelo, he intentado integrarlo yo pero no funciona, evidentemente algo he hecho mal http://johnpolacek.github.com/superscrollorama/ Edited February 10, 2013 by sarerac Quote Link to post Share on other sites
uhf 4 Posted February 10, 2013 Share Posted February 10, 2013 (edited) Buenas noches. Aqui tienes una muestra de que funciona. Eso sí, implementado de cualquier manera y a todo correr. Mira el código y saca tus conclusiones. Esta trasteado sobre el archivo "simpledemo.html" que te pudes descargar en la web de superscrollorama Habría que saber qué es lo que necesitas o quieres conseguir, pero ya ves que es factible. . Un saludo y espero que te sirva de algo. Si precisas un poco más el efecto o como quieres implementarlo podremos echarte un cable. Saludos! mon Edited February 11, 2013 by uhf Quote Link to post Share on other sites
sarerac 0 Posted February 10, 2013 Author Share Posted February 10, 2013 Gracias intentaré implementar como lo has hecho tú con una plantilla simplificada, a ver si lo consigo. Un saludo!! Quote Link to post Share on other sites
sarerac 0 Posted February 10, 2013 Author Share Posted February 10, 2013 (edited) Perdona es que Safari no me permitía estudiar el código con comando "view source:" y en Firefox si. Saludos Edited February 10, 2013 by sarerac Quote Link to post Share on other sites
sarerac 0 Posted February 11, 2013 Author Share Posted February 11, 2013 Hola Perdón por la insistencia. El ejemplo que me mostraste es màs o menos lo que quería excepto que el código tuyo apareciese encima de las letras amarillas nada más abrir la página. He copiado el código en coda para estudiarlo y no funciona no sé si es un problema de librerías...no tengo experiencia en html ( aunque estoy aprendiendo)pero quizá lo que pretendo hacer está fuera de mis posibilidades. Saludos Quote Link to post Share on other sites
uhf 4 Posted February 11, 2013 Share Posted February 11, 2013 ...pero quizá lo que pretendo hacer está fuera de mis posibilidades. No lo creo. Seguro que lo puedes conseguir. Lo importante en todo proyecto es tener claro lo que quieres hacer y conseguir. Para así definir tus necesidades. Hay en internet infinidad de recursos accesibles incluso para novatos como nosotros. Y lo más importante es no cazar moscas a cañonazos. Te digo esto pues me da la impresión que lo que tu pretendes es tener una página donde se cargue el contenido, del que veniamos hablando, de una forma animada. Con el tipo de animación que tu deseas. Para cumplir ee objetivo "parallax" me parece excesivo y complejo. Con jQuery puedes llegar a casi todo. Siempre dentro del marco de cosas sencillas. Es fácil de implementar y comprender y sobre todo de modificar a tu gusto. También puede ser complejo y muy maleable pero hay que ser algo más experto. Para usos sencillos es ideal. Bueno te pongo otro ejemplo que con una par de pequeñas modificaciones sobre el código que ya teniamos crea un efecto (entre otros posibles) en la carga de la página y otro al hacer clik sobre los elementos del menú. Se puede adaptar, modificar, extender, etc. a tu gusto. No tiene nada que ver con "parallax" Visita la página de este ejemplo. Copia el código y no olvides que necesitas ejecutarlo en un servidor ya sea MAMP, otro similar o un servidor en la red. ¡Suerte y un saludo! mon Quote Link to post Share on other sites
sarerac 0 Posted February 12, 2013 Author Share Posted February 12, 2013 La animación se pierde cuando tu ej. lo implemento en la web es posible que sea por la biblioteca jquery o por una mala integración en el código html de la web?. No lo entiendo llevo exactamente el código de tu último ejemplo al editor Coda o Dreamweaver y se ve el menú pero se queda estático, es decir pierde la animación. Quote Link to post Share on other sites
uhf 4 Posted February 12, 2013 Share Posted February 12, 2013 Evidentemente si no ejecutas el código en un servidor real no te valen las llamadas a los cdn de las librerias jQuery <!--Estos 2 scripts/enlaces cargan las librerias js--> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> Pon el código en tu servidor Apache o en MAMP o en un servidor de internet o en su defecto deberás editarlo para cargar esas librerias desde un directorio local, para lo cual debes descargartelas y editar el código de esta manera: <script type="text/javascript" src="ruta_a _el.js"></script> Si te resultan complicadas esas opciones y no tienes un alojamiento con servidor web en internet, te puedo propocionar uno temporalmete (mediante privado) y así trabajarás con fuego real. ¡Venga! A ello y suerte. mon Quote Link to post Share on other sites
sarerac 0 Posted February 12, 2013 Author Share Posted February 12, 2013 Tengo servidor muchas gracias. La verdad es que no consigo integrar bien el menú con tu ejemplo último dentro de Collorama. Se pierde la animación y el resaltado de las palabras al pinchar el menú no me funciona. Quote Link to post Share on other sites
uhf 4 Posted February 13, 2013 Share Posted February 13, 2013 Buenas sarecac: Tienes un privado mon Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.