• Publicidad

Cómo se llama este efecto

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.

Cómo se llama este efecto

Notapor BigBear » 2013-02-08 16:52 @744

¿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.
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Publicidad

Re: Cómo se llama este efecto

Notapor explorer » 2013-02-09 07:53 @370

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.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cómo se llama este efecto

Notapor BigBear » 2013-02-09 11:37 @525

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.004 segundos, usando GeSHi 1.0.8.4


Pero hay un error que provoca que no ande , ¿ qué hice mal ?
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Re: Cómo se llama este efecto

Notapor explorer » 2013-02-09 17:40 @778

En la ventana Consola de errores del Firefox te dirá dónde está el error.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cómo se llama este efecto

Notapor BigBear » 2013-02-10 14:31 @646

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.002 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 ?
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Re: Cómo se llama este efecto

Notapor explorer » 2013-02-10 20:32 @897

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
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cómo se llama este efecto

Notapor BigBear » 2013-02-10 22:34 @982

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?
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Re: Cómo se llama este efecto

Notapor explorer » 2013-02-10 23:13 @009

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).
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Cómo se llama este efecto

Notapor BigBear » 2013-02-11 12:14 @551

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 ?
BigBear
Perlero frecuente
Perlero frecuente
 
Mensajes: 981
Registrado: 2009-03-01 18:39 @818

Re: Cómo se llama este efecto

Notapor explorer » 2013-02-11 20:02 @876

Convierte el estilo en una clase. Y luego la aplicas a los elementos que quieres que tengan ese estilo.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España


Volver a JavaScript

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado