Autor Tema: JavaScript efecto cambiar imagen al pasar ratón por encima new Image() CU01186E  (Leído 6086 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Buenas.

A partir de este código:
Código: [Seleccionar]
<html><head><script type="text/javascript">
image01= new Image()
image01.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png"
image02= new Image()
image02.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg"
function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
</script></head>
<body style="text-align:center; margin:50px;">
<p> Pasa el mouse sobre la imagen </p>
<a  href="#" onmouseover="rollover('example', image02)"
onmouseout="rollover('example', image01)">
<img src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" name="example">
</a>
</body></html>

Citar
a) ¿En qué ámbito se encuentran image01 e image02?
En ámbito global.
Citar
b) ¿Qué tipo de objetos son image01 e image02?
Objeto de tipo imagen.
Citar
c) ¿Aparecerán errores debido a la falta de puntos y coma de terminación en las instrucciones de JavaScript? ¿Por qué?

No, porque el intérprete JavaScript lo insertará automáticamente siempre que le sea posible, facilitando que el código se ejecute.
Citar
d) Al acceder a una imagen con la sintaxis document.images[imagename], ¿se está usando un índice numérico para acceder a la colección?

Si es numérico, indicar qué valores son los que se usan. Si no es numérico, indicar qué tipo de índice es. No, en realidad estamos accediendo desde la propiedad name de la imagen. Esta linea también valdría para que se ejecute el código:
Código: [Seleccionar]
document.images.example.src=newsrc.src;
Código: [Seleccionar]
document.example.src=newsrc.src;
Citar
e) El efecto esperado es que la imagen que se muestra cambie cuando pasamos el puntero del ratón por encima de ella. ¿Por qué se produce ese cambio? Explícalo brevemente.
Mediante el evento onmouseover conseguimos que la imágen cambie al pasar el ratón por encima. Y mediante el evento onmouseout conseguimos que la imágen cambie cuando el puntero del ratón sale de los límites de la imagen.

Saludos.
« Última modificación: 10 de Febrero 2016, 08:43 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días Pedro, todas las respuestas conformes

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".