Bien vamos a continuar.
Ahora vamos a modificar nuestra chivó funciones J.V lo primero que va a tener este método similar al
ejercicio que hemos creado anteriormente.
Vamos a asociar una función llamada cargar imágenes a nuestro evento window punto holdout es decir cuando
se carga nuestro documento HTML esta función se llama cargar imágenes y va a ser lo siguiente Lo que
vamos a hacer es iterar cada una de las imágenes de nuestro documento HTML.
Para ello vamos a utilizar un ciclo for podemos observar que la sintaxis es muy similar al lenguaje
Java definimos una variable en este caso vamos a inicializar una variable que va a ser nuestro contador.
Definimos la variable e igual a cero y posteriormente definimos el número de iteraciones que va a tener
este ciclo así que va ir desde cero hasta el largo de imágenes que tengamos en nuestro documento para
obtener el número de imágenes que tenemos en nuestro documento.
Utilizamos la siguiente sintaxis.
Primero utilizamos el objeto document.
Posteriormente solicitamos la propiedad de Images y básicamente esto nos va a regresar un arreglo para
saber el largo de este arreglo.
Le solicitamos la propiedad Link es decir el largo de este arreglo así que con esta sintaxis podemos
recuperar el largo del arreglo de imágenes que tenemos en nuestro documento HTML así que vamos a ir
desde cero hasta el número de imágenes que tengamos definidos en nuestro documento HTML y una vez que
hayamos terminado de iterar este ciclo Forth incrementamos este contador.
Así que la sintaxis es muy similar al ciclo clásico cuando utilizamos también el lenguaje Java sin embargo
vamos a restringir el tipo de imagen que estamos trabajando.
únicamente vamos a trabajar las imágenes que estén dentro de una hipervínculo ya que a estas imágenes
es que les vamos a asignar el efecto de roll Glover.
Por lo tanto no a todas las imágenes vamos a trabajarlas como vamos a definir a continuación sino únicamente
las que su padre sea igual a un tipo hipervínculo es decir que estén dentro de un elemento.
Así que básicamente la pregunta sería la siguiente si la imagen se encuentra dentro de un nodo padre
que es un hipervínculo entonces realiza el siguiente código
y asociamos el evento configura ROM Lover y lo que hacemos es proporcionar la imagen que estamos encontrando
en este momento que estamos trabajando en este momento así que la función configurarlo Lover va a recibir
como parámetro una imagen y cerramos este IFF y también con eso cerramos el ciclo y concluimos la función
cargar imágenes así que como podemos observar básicamente estamos procesando únicamente las imágenes
que estén dentro de un hipervínculo ya que la idea de estas imágenes que son de tipo hipervínculo en
este ejercicio les vamos a configurar el efecto de ver y creamos a continuación la función configura
Roll Over utilizamos la palabra reservada función posteriormente el nombre de la función configurarlo
Lover ya que es precisamente la función que vamos a mandar a llamar y podemos observar que definimos
un parámetro.
Como hemos comentado en JavaScript no es obligatorio declarar una variable por lo tanto simplemente
podemos definir la variable con el nombre que vamos a utilizar de esta variable y estamos proporcionando
como parámetro la imagen.
En este caso hemos encontrado que se encuentra dentro de un hipervínculo también se podría definir por
ejemplo bar imagen.
Sin embargo no es necesario en JavaScript las variables se pueden definir directamente simplemente poniendo
el nombre de la variable y el cuerpo de esta imagen podemos observar a continuación que vamos a asignar
una propiedad llamada imagen off y a esto le asignamos una nueva imagen y la ubicación el sours de esta
imagen va a ser botón guion bajo otro punto JPG.
Recordemos que estas imágenes las depositamos a nivel raíz por lo tanto la ruta simplemente podemos
poner el nombre de la imagen.
Sin embargo si estuviera en otra carpeta necesitamos acceder primero a la carpeta y posteriormente a
la imagen y configuramos también el evento o más a otro es decir que cuando el cursor se quite de esta
imagen entonces se va a mandar a llamar.
Otra función que se llama cambiá of pero también podemos definir una propiedad a esta imagen llamada
imagen on le asignamos una nueva imagen y el sur de esta nueva imagen es botón ON y también en caso
de que el cursor esté sobre esta imagen entonces configuramos el evento o mouse over y se manda a llamar.
El método cambia así que básicamente lo que estamos haciendo es sobre nuestro elemento imagen le estamos
configurando las propiedades de Off y On básicamente para que podamos observar el efecto de revolver
es decir cuando nos posicionamos sobre el hipervínculo se muestra una imagen y si quitamos el cursor
entonces se muestra una imagen de apagado continuando con nuestro archivo funciones punto JS estas funciones
se ejecutan según el evento que se dispare según hemos configurado anteriormente pero no es al iniciar
la página sino dependen del botón que se presione.
Son conocidos como eventos de tipo Alder
así que definimos las funciones que hemos asociado anteriormente a los eventos de o nos hover y o nos
AWD en este caso.
Esta es la función que asociamos al evento o nos auto la función se llama cambiá off y básicamente lo
que estamos haciendo es que tomamos los valores ya asociados del elemento de la imagen.
En este caso la imagen que disparó el evento por lo tanto simplemente utilizamos el operador dis ya
que hace referencia a la imagen que disparó el evento y por medio de disputo y la propiedad.
Imagen off.
Recordemos que esta propiedad se la configuramos a la imagen que disparó el evento y por medio de la
propiedad de sus asignamos el valor de la Ruta de la imagen pero tomado el Sors de la propiedad que
hemos configurado de imagen of y también en el caso de cambiá on.
Básicamente hacemos lo mismo pero tomamos la propiedad de imagen on y de esta manera vamos a cambiar
el sours simplemente tomamos la ruta y la volvemos a indicar en este caso a la imagen que ejecutó este
evento así que en este caso según la imagen que sea ejecutado y ejecutado el evento tomamos la ruta
de la propiedad.
Imagen ón tomamos la ruta de esta imagen y le asignamos esta ruta a la imagen que lanzó este evento
así que simplemente tomamos los valores que hemos asociado a esta imagen.
Básicamente con eso lo que estamos haciendo es hacer el cambio dependiendo del tipo de evento que sea
lanzado ya sea un mouse o amaos over finalmente definimos el archivo punto CCC e indicamos en nuestro
body el background vamos a cambiarlo según el color que se muestra y la imagen indicamos que no tenga
ningún borde.
Eso es todo lo que va a tener nuestro archivo estilos puntos CSS
y vamos a ejecutar nuestro proyecto.
Al poner el cursor sobre el botón se activa el evento y cambia el botón de color como sigue así que
una vez que posicionamos el cursor sobre nuestro botón de Enviar entonces podemos observar que se cambia
al evento de un mouse o ver y si quitamos el cursor sobre nuestra imagen entonces se manda a llamar
el evento de un mouse a otro y si damos clic sobre el link de ejemplo mejorado vamos a observar el mismo
resultado.
Sin embargo en este caso hemos trabajado más con JavaScript para que no tengamos tanto código HTML sino
que tengamos más código JavaScript y por medio de JavaScript trabajemos cada uno de los eventos que
queremos manipular así que se deja como tarea extra probar cada uno de estos casos y también sería buen
ejercicio agregar alertas para que puedan observar cuando entra a cada uno de los métodos dependiendo
de los eventos que se van ejecutando como conclusión del ejercicio.
Hemos puesto en práctica el concepto de rol hover y este efecto Podemos agregarlo a cualquiera de nuestros
formularios HTML.
Vimos dos ejemplos uno utilizando directamente los eventos de HTML y otro ocultando más nuestro código
y agregando funciones de JavaScript para administrar el cambio de imágenes.
Con eso concluimos nuestro ejercicio de rol hover con JavaScript.