Paso 1 - Reúna las imágenes
He seleccionado 3 imágenes, muy similares en tamaño. Uso de Photoshop que hice cada imagen W 300 px por 200 px H con una resolución de 72 ppp. Todo lo que realmente importa aquí es que aunque las imágenes son compatibles en tamaño entre sí.Paso 2 - Crear un Div que contiene una barra de navegación
Abra el Panel de Insertar, ponerlo a disposición y seleccione la opción Dibujar Div PA.Dibuja una Div PA en su página, utilice el Panel de propiedades para establecer el tamaño de 930px 220px v.
Paso 3 - Coloque 3 imágenes
Arrastra cada imagen, a su vez a la Div PA para que estén alineadas horizontalmente, sin espacios entre ellos.Paso 4 - Crear una clase denominada barra de navegación
El uso de CSS para controlar lo que sucede a una transferencia significa que todos los vuelcos, texto o imágenes que ser de estilo de la misma. Para evitar esa situación, en primer lugar crear un estilo de clase que debe atribuirse a cada imagen.En el panel Estilos CSS, crear una nueva regla CSS, establezca el tipo a la clase y el nombre de barra de navegación. Utilice las opciones de borde estilos para crear una izquierda
Paso 5 - Aplicar el estilo de clase
Seleccione cada imagen y el uso de la clase en el menú desplegable en el Panel de Propiedades para establecer cada uno de ellos a la clase llamada barra de navegación.Paso 6 - Creación de un estilo compuesto Hover
Ahora, para definir el estilo de rollover a aplicar.Nombre del estilo a: hover (el estilo a: hover controla la configuración de estilo para los enlaces cuando el ratón está sobre ellos).
Paso 7 - Crear una transparencia
Para terminar el efecto, y hacer que las imágenes se desvanecen al 50% de opacidad, cuando se dio la vuelta, cambiar a la vista de código (o dividir si el youd prefiera) y encontrar el un parámetro: hover que se enumeran cerca de la parte superior del código.
Agregue el siguiente código al estilo compuesto para crear un cambio de la opacidad del 50%:
{
Filtro: alpha (opacity = 50);
opacidad: 0,5;
}
Paso 8 - Crear enlaces
Ahora selecciona la primera imagen y utilizar el campo de enlace en el panel de propiedades para crear un enlace, intenta insertar http://www.macprovideo.com/hub en él, por ejemplo.Repita este procedimiento para todas las 3 imágenes para que todos se convierten en enlaces.








No hay comentarios.:
Publicar un comentario