Activa JavaScript para disfrutar de los vídeos de la Mediateca.
NUEVO EDITOR: Efecto hover
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Hola, vamos a ver cómo conseguir algo como esto que tenemos aquí.
00:00:00
Yo aquí tengo un contenido con una imagen de una flor
00:00:04
y cuando paso el ratón por encima de la imagen se convierte en una flor con polen
00:00:07
y cuando saco el ratón fuera, pues vuelve a mostrarme la flor original.
00:00:14
Es algo bastante avanzado, pero que se puede hacer fácil. Vamos a ver cómo hacerlo.
00:00:21
En primer lugar, voy a añadirme otro agregador de contenidos aquí y voy a crear un contenido nuevo, que lo voy a llamar flor con polen.
00:00:26
Bien, en el cuerpo voy a incorporar las dos imágenes. Por un lado voy a insertar una imagen que yo tengo en mi ordenador, la imagen de la flor.
00:00:41
Le pongo un título y una descripción y subir fichero.
00:00:59
bien, ok
00:01:04
ahora dejo un espacio en blanco
00:01:06
por ejemplo y a continuación añado
00:01:09
la otra imagen
00:01:11
voy a buscar la flor con pole
00:01:13
voy a llamar flor
00:01:19
también
00:01:22
flor subir fichero
00:01:23
bien
00:01:26
yo ahora tengo ya
00:01:28
las dos imágenes subidas
00:01:30
y ahora necesito editar
00:01:32
el código html para conseguir este efecto
00:01:34
pero es bastante
00:01:37
sencillo, aunque nos tengamos que meter aquí en el código. Lo primero que veo es el código
00:01:38
así como en una línea, le voy a dar al botón de dar formato para entender un poquito el
00:01:43
código que tengo aquí. Yo aquí tengo como dos bloques, el primero que empieza por este
00:01:51
signo y las letras IMG y que termina aquí. Y aquí tengo lo mismo. Esto es el trozo de
00:01:57
código que corresponde a la primera imagen, este es el trozo de código que corresponde
00:02:05
a la segunda imagen. Bien, lo que vamos a hacer es aquí, en el trozo que corresponde
00:02:08
a la primera imagen, antes de las etiquetas de cierre, voy a meterle aquí un salto de
00:02:14
línea y vamos a meter aquí un poquito de código. Necesito especificar dos cosas. ¿Qué
00:02:19
es lo que quiero que suceda cuando el ratón pasa por encima de mi flor? ¿Y qué es lo
00:02:28
que quiero que suceda cuando el ratón sale de por encima de mi flor de lo que es esta imagen
00:02:34
entonces qué es lo que quiero que pase cuando el ratón pasa por encima de esta imagen pues que se
00:02:39
muestre esta otra la segunda flor entonces me voy a la dirección url que el sistema le ha dado a
00:02:45
esta segunda imagen es todo este chorizo lo que está entre las comillas vale botón derecho copiar
00:02:53
Y ahora, eso que he copiado, que está entre medias de las comillas, lo pego aquí, sin más, entre las dos comillas sencillas.
00:03:01
Pegar.
00:03:10
Ya le he dicho que cuando el ratón pase por encima de esta imagen, lo que haga es mostrarme la otra, la imagen del polen.
00:03:12
¿Qué quiero que haga el sistema cuando el ratón salga de encima de la imagen?
00:03:19
Pues que vuelva a mostrar la imagen que yo estaba mostrando en un principio, que es esta.
00:03:24
Vuelvo a copiar, copio lo que corresponde, la dirección URL que corresponde a esta imagen, lo que está entrecomillado, lo copio y me vengo aquí y lo pego entre medias de estas dos comillas simples, pegar.
00:03:30
ahora ya esta segunda imagen ya esto ya no me vale para nada lo voy a quitar porque realmente
00:03:45
la ha insertado para conseguir su dirección url y me aseguro de que la etiqueta de cierre de esta
00:03:51
primera imagen está aquí después al final del todo le doy insertar y cerrar y vemos que ya
00:04:00
sólo se me muestra una imagen y que cuando pasó el ratón por encima justo pues me muestra la otra
00:04:08
imagen. Y esto sería todo.
00:04:15
- Idioma/s:
- Autor/es:
- García Bernal, Francisca
- Subido por:
- Francisca G.
- Licencia:
- Reconocimiento - No comercial - Sin obra derivada
- Visualizaciones:
- 209
- Fecha:
- 14 de mayo de 2020 - 16:27
- Visibilidad:
- Público
- Centro:
- C RECURSOS CENTRO FORMACIÓN CURSO EDUCAMADRID AVANZADO (M)
- Duración:
- 04′ 19″
- Relación de aspecto:
- 1.62:1
- Resolución:
- 1230x760 píxeles
- Tamaño:
- 10.15 MBytes
