1 00:00:00,500 --> 00:00:04,759 Hola, vamos a ver cómo conseguir algo como esto que tenemos aquí. 2 00:00:04,879 --> 00:00:07,620 Yo aquí tengo un contenido con una imagen de una flor 3 00:00:07,620 --> 00:00:14,080 y cuando paso el ratón por encima de la imagen se convierte en una flor con polen 4 00:00:14,080 --> 00:00:20,719 y cuando saco el ratón fuera, pues vuelve a mostrarme la flor original. 5 00:00:21,379 --> 00:00:26,339 Es algo bastante avanzado, pero que se puede hacer fácil. Vamos a ver cómo hacerlo. 6 00:00:26,339 --> 00:00:41,179 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. 7 00:00:41,179 --> 00:00:57,020 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. 8 00:00:59,280 --> 00:01:04,019 Le pongo un título y una descripción y subir fichero. 9 00:01:04,019 --> 00:01:06,579 bien, ok 10 00:01:06,579 --> 00:01:09,500 ahora dejo un espacio en blanco 11 00:01:09,500 --> 00:01:11,640 por ejemplo y a continuación añado 12 00:01:11,640 --> 00:01:13,040 la otra imagen 13 00:01:13,040 --> 00:01:19,680 voy a buscar la flor con pole 14 00:01:19,680 --> 00:01:22,790 voy a llamar flor 15 00:01:22,790 --> 00:01:23,650 también 16 00:01:23,650 --> 00:01:26,409 flor subir fichero 17 00:01:26,409 --> 00:01:28,109 bien 18 00:01:28,109 --> 00:01:30,790 yo ahora tengo ya 19 00:01:30,790 --> 00:01:32,909 las dos imágenes subidas 20 00:01:32,909 --> 00:01:34,870 y ahora necesito editar 21 00:01:34,870 --> 00:01:37,170 el código html para conseguir este efecto 22 00:01:37,170 --> 00:01:38,250 pero es bastante 23 00:01:38,250 --> 00:01:43,650 sencillo, aunque nos tengamos que meter aquí en el código. Lo primero que veo es el código 24 00:01:43,650 --> 00:01:51,049 así como en una línea, le voy a dar al botón de dar formato para entender un poquito el 25 00:01:51,049 --> 00:01:57,730 código que tengo aquí. Yo aquí tengo como dos bloques, el primero que empieza por este 26 00:01:57,730 --> 00:02:05,209 signo y las letras IMG y que termina aquí. Y aquí tengo lo mismo. Esto es el trozo de 27 00:02:05,209 --> 00:02:08,810 código que corresponde a la primera imagen, este es el trozo de código que corresponde 28 00:02:08,810 --> 00:02:14,030 a la segunda imagen. Bien, lo que vamos a hacer es aquí, en el trozo que corresponde 29 00:02:14,030 --> 00:02:19,770 a la primera imagen, antes de las etiquetas de cierre, voy a meterle aquí un salto de 30 00:02:19,770 --> 00:02:28,949 línea y vamos a meter aquí un poquito de código. Necesito especificar dos cosas. ¿Qué 31 00:02:28,949 --> 00:02:34,330 es lo que quiero que suceda cuando el ratón pasa por encima de mi flor? ¿Y qué es lo 32 00:02:34,330 --> 00:02:39,330 que quiero que suceda cuando el ratón sale de por encima de mi flor de lo que es esta imagen 33 00:02:39,330 --> 00:02:45,490 entonces qué es lo que quiero que pase cuando el ratón pasa por encima de esta imagen pues que se 34 00:02:45,490 --> 00:02:53,050 muestre esta otra la segunda flor entonces me voy a la dirección url que el sistema le ha dado a 35 00:02:53,050 --> 00:03:01,569 esta segunda imagen es todo este chorizo lo que está entre las comillas vale botón derecho copiar 36 00:03:01,569 --> 00:03:10,669 Y ahora, eso que he copiado, que está entre medias de las comillas, lo pego aquí, sin más, entre las dos comillas sencillas. 37 00:03:10,870 --> 00:03:11,349 Pegar. 38 00:03:12,629 --> 00:03:19,069 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. 39 00:03:19,590 --> 00:03:24,689 ¿Qué quiero que haga el sistema cuando el ratón salga de encima de la imagen? 40 00:03:24,849 --> 00:03:30,169 Pues que vuelva a mostrar la imagen que yo estaba mostrando en un principio, que es esta. 41 00:03:30,169 --> 00:03:45,370 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. 42 00:03:45,370 --> 00:03:51,110 ahora ya esta segunda imagen ya esto ya no me vale para nada lo voy a quitar porque realmente 43 00:03:51,110 --> 00:04:00,689 la ha insertado para conseguir su dirección url y me aseguro de que la etiqueta de cierre de esta 44 00:04:00,689 --> 00:04:08,289 primera imagen está aquí después al final del todo le doy insertar y cerrar y vemos que ya 45 00:04:08,289 --> 00:04:15,189 sólo se me muestra una imagen y que cuando pasó el ratón por encima justo pues me muestra la otra 46 00:04:15,189 --> 00:04:16,949 imagen. Y esto sería todo.