Vamos a realizar a continuación el ejercicio de Rowley ver con JavaScript.
Están listos.
Vamos
el objetivo del ejercicio es crear un proyecto JavaScript para poner en práctica el concepto de rol
hover y al finalizar deberemos observar lo siguiente según se muestra básicamente el rol hover quiere
decir que cuando nos posicionamos sobre una imagen entonces vamos a hacer un cambio de imagen.
Esto significa precisamente Robert
como primer paso vamos a crear nuestro proyecto.
El proyecto se llama Roll Over JavaScript y lo depositamos en la ruta mostrada y damos suelen finalizar
como siguiente paso creamos un archivo llamado funciones de JavaScript.
Así creamos un nuevo archivo JavaScript File el archivo se llama funciones y lo depositamos a nivel
raíz de nuestro proyecto.
Por lo tanto el folder está vacío y damos clic en Finalizar como siguiente paso vamos a agregar un archivo
llamado estilos CSS así que creamos un nuevo archivo de tipo CSS.
El archivo se llama estilos y lo depositamos también a nivel raíz y damos clic en Finalizar ahora vamos
a agregar un nuevo archivo de tipo HTML.
Este archivo se llama mejorado punto HTML así que va a ser un nuevo archivo de tipo HTML.
El archivo se llama mejorado y damos clic en Finalizar
y también vamos a crear un nuevo archivo llamado resultado.
Este archivo es de tipo HTML lo depositamos a nivel raíz y damos clic en Finalizar como siguiente paso
vamos a descargar algunas imágenes para trabajar con este concepto de roll Lover así que vamos a descargar
las imágenes a utilizar dentro de nuestro proyecto.
En primer lugar vamos a descargar la imagen de botón y un bajo un punto JPG así que damos clic sobre
el link mostrado y sobre la imagen damos clic derecho a guardar imagen como y seleccionamos la ruta
dónde está nuestro proyecto.
En este caso la ruta mostrada sin embargo puede ser alguna de otra ruta dependiendo de dónde hayan creado
su proyecto pero en este caso depositamos a nivel raíz esta imagen así que guardamos nuestra imagen
llamada botón guion bajo un punto JPG y damos clic en Guardar
vamos a descargar ahora la segunda imagen que va a ser para nuestro botón off es decir que va a ser
una imagen en color rojo.
Damos clic sobre el mostrado y sobre la imagen damos clic derecho a guardar imagen como también la guardamos
a nivel raíz de nuestro proyecto en la ruta de nuestro proyecto públic HTML.
Guardamos la imagen botón guion bajo off y damos clic en Guardar ahora vamos a modificar nuestro archivo
índex punto HTML.
Definimos el Doc type.
Abrimos nuestro documento HTML y también del cabecero agregamos el meta y el título llamado ejemplo
de botones Rowley over y vamos a agregar un link a nuestro archivo.
Estilos puntos CSS
cerramos el cabecero y abrimos el cuerpo de nuestro contenido HTML y agregamos un título llamado ejemplo
de botones Hanóver.
También agregamos un hipervínculo a nuestro archivo resultado punto HTML y en este caso vamos a configurar
nuestro evento de Rowley ver con los siguientes eventos por medio del evento o más o ver lo que vamos
a hacer es asignar la ruta de nuestro botón ON.
Así que a través de este evento nos hover lo que hacemos es indicar documento punto botón punto Sors
es decir que vamos a indicar la ruta de nuestro botón para este evento o nos hover y debido a que este
botón lo guardamos a nivel raíz entonces indicamos directamente el nombre de nuestro botón.
Esa va a ser la ruta ese va a ser el Sors directamente el nombre de la imagen botón guion bajo un punto
JPG y también vamos a configurar la opción de onas out.
Y de igual manera indicamos la ruta donde se encuentra esta imagen y asignamos el valor de la imagen
de botón un bajo off así que estamos configurando dos eventos cuando nos posicionamos sobre este hipervínculo
se va a mostrar la imagen de botón ON y cuando nos quitemos de este hipervínculo entonces se va a mostrar
la imagen de botón off pero por default asignamos la imagen de Hof.
Por ello es que este hipervínculo de manera inicial va a tener asignada la imagen de botón off.
Para ello utilizamos la etiqueta de imagen y asignamos el sours de botón off punto JPG.
También asignamos un nein.
En este caso el NAICM de botón y un texto alternativo también llamado botón y con eso cerramos nuestro
hipervínculo así que nos posicionamos sobre este hipervínculo se va a hacer el cambio de evento según
las imágenes que hemos configurado en cada uno de estos eventos o nos hover y hormas a otro o más hover
es cuando nos posicionamos en el hipervínculo y o más Moussaoui es cuando quitamos el puntero de este
hipervínculo agregamos un salto de línea y también un link.
En este caso es un link hacia el archivo mejorado punto HTML ya que esta es una forma de trabajar el
evento rolos ver pero también podemos hacerlo de una mejor manera por medio de JavaScript.
Así que para ello este código mejorado lo vamos a agregar en este archivo mejorado punto HTML cerramos
el body y también cerramos el código HTML
ahora vamos a modificar nuestro archivo mejorado punto HTML agregamos lo siguiente el título ejercicio
rol Lover mejorado y en ese archivo vamos a asociar un elemento de tipo estilos puntos CSS nuestro archivo
CSS y también nuestro archivo de funciones punto JS y cerramos el cabecero de nuestro documento HTML
y dentro del Bodhi lo que vamos a hacer es agregar el título ejercicio Rolo ver mejorado y agregamos
un hipervínculo.
En este caso el hipervínculo de otro punto HTML y la asociamos a la imagen de botón off pero a esta
imagen le vamos a asignar un identificador en este caso el identificador de botón.
Así que por medio de JavaScript vamos a manipular esta imagen y por ello es que vamos a asignarle este
Heydi llamado botón cerramos nuestro hipervínculo y también cerramos el bodhi de nuestro documento HTML
y también la etiqueta HTML.
Podemos observar que este es un código mucho más limpio y todo el código lo vamos a hacer por medio
de JavaScript y con la ayuda del archivo estilos CSS.
Vamos a ver a continuación este código y modificamos también el archivo resultado puntua HTML.
Básicamente este archivo solamente está mostrando que cambiamos de archivo HTML así que mostramos.
Este es el resultado de presionar el botón de enviar únicamente es un texto para saber que hemos cambiado
de página vamos a detener hasta aquí este video y en el siguiente video vamos a codificar nuestro archivo
funciones puntos Gotha eso.