Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.
http://perlenespanol.com/foro/

Cómo se llama este efecto

http://perlenespanol.com/foro/como-se-llama-este-efecto-t7890.html

Página 1 de 1

Cómo se llama este efecto

NotaPublicado: 2013-02-08 16:52 @744
por BigBear
¿Cómo se llama este efecto? http://www.gedzac.com/home.php?id=utilidades Me refiero a cuando rozamos con el ratón en los nombres.

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-09 07:53 @370
por explorer
El efecto de cambiar algo cuando el ratón pasa por encima, se activa con el evento OnMouseOver, en JavaScript, o con el selector :hover, en CSS.

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-09 11:37 @525
por BigBear
Ok, gracias a lo que me dijiste encontré un código similar e hice el mio.


Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <script type="text/javascript">
  2.  
  3. function encima(fila2) {
  4.  
  5. document.des.descrip.value = "probando2";
  6. document.yeah.innerHTML = "test";
  7. }
  8.  
  9. </script>
  10.  
  11. <form name=des action='' method=POST>
  12. <table border=1>
  13. <td>Nombre</td><td>Descripcion</td><td name=yeah></td><tr>
  14. <td onmouseover="encima(this)">Test1</td><td id=yeah rowspan="13" height="127">sadsadsad</td><tr>
  15. <td>sadsad</td><tr>
  16. <td>sadsad</td><tr>
  17. <td>sadsad</td><tr>
  18. <td>sadsad</td><tr>
  19.  
  20. </table>
  21.  
  22. </form>
  23.  
  24. </body>
  25. </html>
  26.  
Coloreado en 0.003 segundos, usando GeSHi 1.0.8.4


Pero hay un error que provoca que no ande , ¿ qué hice mal ?

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-09 17:40 @778
por explorer
En la ventana Consola de errores del Firefox te dirá dónde está el error.

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-10 14:31 @646
por BigBear
Sí, ya vi los errores, arreglé ese error y ya casi termino, pero me falta algo que es cuando los nombres tienen espacios, como ves en el código:

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2.  
  3. <script type="text/javascript">
  4.  
  5. function encima(op) {
  6.        
  7.     switch(op) {
  8.  
  9.         case "Base64":
  10.             descrip.innerHTML = "base";
  11.             break;
  12.  
  13.         case "URL Shorter":
  14.             descrip.innerHTML = "URL Shorter";
  15.             break;
  16.     }
  17. }
  18. </script>
  19.  
  20. <table border=1>
  21. <td>Nombre</td><td>Descripcion</td><tr>
  22. <td onMouseOver=encima('Base64')>Base64</td><td id='descrip' rowspan='13' height='127'>sadsadsad</td><tr>
  23. <td onMouseOver=encima('URL Shorter')><a href=sadsad>URL Shorter</td><tr>
  24. </table><br><br></div></div>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


Ya vi los errores como vos me dijiste en Firefox y es el tema de los espacios que se corta en "URL".

¿ Cómo puedo arreglar el tema de los espacios ?

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-10 20:32 @897
por explorer
El código está mal... faltan las marcas <body> y un par de <div>... algunos navegadores no lo presentarán bien.

Pero el problema está en que no has entrecomillado los valores del evento onmouseover.

Con ese cambio, ya funciona:
Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. function encima(op) {
  6.  
  7.     switch(op) {
  8.  
  9.         case "Base64":
  10.             descrip.innerHTML = "base";
  11.             break;
  12.  
  13.         case "URL Shorter":
  14.             descrip.innerHTML = "URL Shorter";
  15.             break;
  16.     }
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <table border=1>
  22. <td>Nombre</td><td>Descripcion</td><tr>
  23. <td onMouseOver="encima('Base64')">Base64</td><td id='descrip' rowspan='13' height='127'>sadsadsad</td><tr>
  24. <td onMouseOver="encima('URL Shorter')"><a href=sadsad>URL Shorter</td><tr>
  25. </table><br><br>            
  26. </body>
  27. </html>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-10 22:34 @982
por BigBear
Sí, ahí ya funciona. El problema es que las comillas dobles y simples me confunden (soy de mente lenta :? ).

Mira esta línea porque para que funcione el código tengo que hacer igual que vos para que quede así:

Código: Seleccionar todo
<td onMouseOver="encima('URL Shorter')">


La línea del problema es esta:

Código: Seleccionar todo
echo "<td onMouseOver=encima('".$a[$i][1]."')><a href=".$a[$i][3].">".$a[$i][1]."</td><tr>";


¿Cómo tendría que mejorar esta línea?

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-10 23:13 @009
por explorer
Te faltan las comillas dobles que ya te comenté.

Debes 'escaparlas' si necesitas ponerlas dentro de otro código entrecomillado.

O intercambiar el uso de comillas simples con dobles. Dobles entrecomillando alguna simple, o viceversa.

(Bueno, esto último es de Perl. No sé si es igual en JavaScript).

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-11 12:14 @551
por BigBear
Genial, explorer, me falta un último detalle que es una cuestión de diseño. El problema es que tengo este css:

Sintáxis: [ Descargar ] [ Ocultar ]
Using css Syntax Highlighting
  1. #descargas {
  2. margin: 0 auto;
  3. font-size: 16px;
  4. background-color:#0f0f0f;
  5. border-width: 1px;
  6. border-style:solid;
  7. border-color:333333;
  8. border: solid 1px #333333;
  9. }
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4

El problema es que quiero usarlo en toda la tabla pero si cambio el id que quiero usar para agregarle id=descargas y tener el diseño voy a arruinar el efecto que hice con JavaScript. Intenté cambiando el id por name=descrip pero el efecto deja de funcionar.

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <td id='descrip' rowspan='20' height='130'>
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


¿ Qué puedo hacer con este error ?

Re: Cómo se llama este efecto

NotaPublicado: 2013-02-11 20:02 @876
por explorer
Convierte el estilo en una clase. Y luego la aplicas a los elementos que quieres que tengan ese estilo.
Todos los horarios son UTC - 6 horas [ DST ]
Página 1 de 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/