domingo, 27 de abril de 2014

Para que nos sirve Rollover

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í.
3 images

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.
AP Div

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.
lined up images

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.
null

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.
class applied

Paso 6 - Creación de un estilo compuesto Hover

Ahora, para definir el estilo de rollover a aplicar.
compound

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.
code view

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.
link made

Repita este procedimiento para todas las 3 imágenes para que todos se convierten en enlaces.

Paso 9 - Probar la página

Por último, guarde el archivo de paginación
rollovers

No hay comentarios.:

Publicar un comentario