Dreamweaver CC 2017 esencial

Uso de imágenes de sustitución en Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1197 cursos !

Prueba gratis Mostrar modalidades de suscripción
Las imágenes de sustitución se siguen usando aún hoy para conseguir efectos atractivos de interactividad: la idea es que, cuando el cursor pasa por encima de un elemento activo, la imagen cambie por otra consiguiendo así efectos muy interesantes.

Transcripción

Hay diferentes maneras de crear botones dentro de HTML. Por ejemplo, en los selectores, se puede añadir ":hover" y añadir estilos concretos que se apliquen sobre textos, o sobre cualquier otro elemento, y eso hace que, cuando se pasa por encima, ese elemento en concreto sea interactivo, cambie de aspecto. Pero, a veces, no es suficiente, hace falta hacer efectos especiales más llamativos, y, para ello, muchas veces se utilizan las imágenes de sustitución. Una imagen de sustitución consiste en una imagen que cuando paso por encima de ella cambia y, cuando hago clic sobre ella también cambie. Vamos a ver cómo se crean esas imágenes de sustitución. Dentro de Insertar, dentro de HTML, en el apartado de multimedia, en el apartado de HTML Video y demás tenemos Imagen de sustitución. Así que voy a hacer clic en alguna parte de la pantalla, voy a pulsar en Imagen de sustitución y voy a pedir que me lo añada después de donde he seleccionado. Me pide primero un nombre, "logo_interactivo", Una imagen original, o sea cómo se va a ver la imagen por defecto, que va a ser este sustitución_a. Luego, una imagen de sustitución, cómo va a cambiar cuando yo pase por encima de ella. Selecciono Examinar y selecciono la segunda imagen. Esta carga previa va a servir para que se ocupe el navegador de añadir un evento de JavaScript, añadir código, el necesario para que haga una pre-carga de esta imagen antes de que se haya pasado por encima, o sea, cuando se carga la página. Y gracias a eso conseguimos que no haga un pequeño parpadeo cuando se pasa por encima el cursor, si no fuese así, efectivamente haría un pequeño parpadeo hasta que la imagen ha sido cargada. En Texto alternativo es lo mismo que el atributo alt (tecleando) luego de la página, o sea, aquí tengo que poner una descripción. Y luego por último que, al hacer clic, ir a URL, o sea aquí puedo poner el sitio donde debería de ir. Pues podría poner, por ejemplo, a la página index.html. Pulso en Aceptar y aquí lo vemos, cuando paso por encima como, efectivamente cambia esa imagen. Si me voy al código, En realidad, lo que ha ocurrido es que se ha generado un enlace, dentro del enlace se ha añadido una imagen, esta imagen. Pero, además, sobre ese enlace se ha añadido código de JavaScript, que se ocupa de hacer que se sustituya una imagen por la otra. Igual que lo he hecho automáticamente, también podría añadir aquí ahora un "onMouse" clic que sirviese para que, además, cuando yo hiciese clic sobre esa imagen automáticamente cambiase a una tercera. Esto es lo que se llaman "Imágenes de sustitución".

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.