Autor Tema: JavaScript. Objetos tipo Image y sus propiedades y métodos src rollover CU01186E  (Leído 2696 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas noches.

Mediante la presente hago la entrega de una posible solución del ejercicio CU01186E del curso JavaScript.

Citar
EJERCICIO

Un programador ha desarrollado un código y nos han pedido que lo revisemos. Escribe este código en un editor y responde a las siguientes preguntas (nota: cambia la ruta de las imágenes si quieres):

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 un ámbito global

Citar
b) ¿Qué tipo de objetos son image01 e image02?

Object Image.

Citar
c) ¿Aparecerán errores debido a la falta de puntos y coma de terminación en las instrucciones de JavaScript? ¿Por qué?

No aparecer errores porque el intérprete del navegador, aunque no está perfectamente escrito el código, siempre intenta ejecutar el código en la medida que se pueda.

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 se está usando un índice numérico. Es un índice mediante el nombre del elemento.

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.

Se produce el cambio de la imagen gracias a esta parte del código HTML:

Código: [Seleccionar]
onmouseover="rollover('example', image02)" onmouseout="rollover('example', image01)"
Y la función:

Código: [Seleccionar]
function rollover(imagename, newsrc){
document.images['example'].src = newsrc.src;
}

Cuando pasamos por encima con el ratón se toma como propiedad(src) de la imagen el valor de la variable "image02" que es: "http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg". Cuando apartamos el ratón del area del elemento "<img>" la propiedad(src) de la imagen toma el valor de la variable "image01" que es: "http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png". Por eso ocurre el cambio de la imagen al mover el ratón encima.

Gracias.
« Última modificación: 03 de Mayo 2016, 17:24 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CU01186E Image, new, complete naturalWidth en JavaScript
« Respuesta #1 en: 01 de Mayo 2016, 12:19 »
Hola dimiste.

Todo Ok.

Solo puntualizar, en el apartado d, que se accede mediante la propiedad name de la imagen.



Saludos. ;D

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:JavaScript. Objetos tipo Image y sus propiedades y métodos. CU01186E
« Respuesta #2 en: 02 de Mayo 2016, 13:21 »
Gracias por corregirme el ejercicio y por tu tiempo, pedro,,

Es lo que quería decir, que se accede mediante la propiedad "name" del elemento, pero creo que no me he expresado bien :) Tu comentario es mucho mejor. Gracias.

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".