Rollovers En Adobe Dreamweaver CS3

Este tutorial está diseñado para dar al usuario un mayor control y flexibilidad, usando la Dreamweaver CS3 interfaz para crear imagen mouseovers. También se enseñará cómo asignar la imagen mouseover meta a algún otro sitio en la página web y, a continuación, asignar un estilo css mouseover al original mouseover botón.

Parte 2 Muestra cómo incrustar Swf videos pop-up en tu página web con algunos ajustes menores de las zonas edificadas en funciones de Dreamweaver CS3.

Abraham chaffin CreativeCow.net, Cambria, California EE.UU. © 2007 CreativeCow.net. Todos los derechos reservados.

Parte 2

Película 1 Movie 2 Movie 3

El objeto de este tutorial es para mostrar un video cuando un elemento de renovación. Vamos a empezar con la creación de las clases CSS que vamos a asignar a la posición a lo largo de este tutorial div.

1) en la ventana haga clic en el css "nueva regla css" icono. Selector de tipo de ser "de clase", Llamar al nombre de la clase "movinvis" y debe ser creado para este documento sólo.

2) en la ventana de definición de la regla css seleccione la opción "posicionamiento" de categoría y fijar el tipo de posición absoluta, Visibilidad a escondidas, Y el índice-z a 999. (posicionamiento absoluto hace que la clase no empujar otros elementos a su alrededor, Y un mayor índice de z-hará que la clase en la parte superior de otros elementos.) Pulse OK.

3) una vez más crear una nueva regla css el mismo que en los pasos 1 y 2 sólo establece el nombre de la clase "movvis" y ajuste la visibilidad visibles.

4) incluir un nuevo div por ir al menú Insertar diseño de objetos etiqueta div. No establece ninguna propiedad de la div todavía y pulse Aceptar.

5) seleccionar la recién creada div y en la ventana de propiedades de la serie div id al "movtarget" y la clase a la "movinvis".

Ahora que el marcador de posición div está configurada para recibir nuestras películas vamos a crear los botones que se utilizarán para la rollovers. Esta vez por la sencillez que sólo el uso de texto.

6) coloca el cursor por encima de lo invisible y div tipo "película 1", seleccione el texto, Y lo convierten en un hipervínculo. Poner "#" como el nombre del archivo o URL. (puede repetir este paso para configurar el rollovers para "película de 2" y "película 3"

Próximo vamos a insertar las películas que queremos asignar a la utilización de la prórroga div enlaces. Entonces vamos a asignar a la div onmouseover de nuestros vínculos. Finalmente vamos a asignar las clases onmouseover y onmouseout de modo que el div sólo es visible cuando una película se muestra.

7) vaya al menú Insertar medios de comunicación Flash y elegir rollover1.Swf. Pulse OK.

8) seleccione la recién insertado Flash video y vaya al menú Ver Código. Seleccione el código entre las noscript y / noscript etiquetas y copiarlo en el portapapeles para ser pegado más tarde.

9) volver a ver el diseño de ir a ver diseño. Seleccionar el Flash video y borrarlo.

10) seleccione la opción "Película 1" en el vínculo y pulse la ventana de comportamientos (+) comportamiento botón añadir. Elegir conjunto texto texto conjunto del envase. Seleccionar el contenedor div "movtarget" copiar y pegar el código en el nuevo html campo.

11) asegúrese de que el comportamiento se define de la onmouseover evento para crear este efecto. Si no se puede cambiar haciendo clic en el evento y la elección de la onmouseover desplegable.

12) con la "película 1" vínculo aún seleccionado (+) añadir otro comportamiento llamado "cambio de propiedad". Asegúrese de que el tipo de elemento es la "p", Y el elemento div id es "movtarget". Seleccione la opción "introducir:"La radio de la propiedad y entrar en" clase ". Escriba "movvis" para el nuevo valor y pulse Aceptar. Asegúrese de que este comportamiento se atribuye al evento onmouseover, Si no la cambie.

13) repetir el paso 12 sólo asignar el nuevo valor como "movinvis" y asignar la acción al evento onmouseout.

14), repita los pasos 7a-13ro a "Movie 2" y "la película 3".

Ahora vamos a realizar un truco en el peso seco que utiliza javascript para cambiar el comportamiento de propiedad para que funcione en la forma en que lo utilizan para cambiar de clase.

15) Vaya al menú Editar Buscar y reemplazar. Encontrar en el "documento", Búsqueda de "código fuente", Encontrar "obj.Estilo.", Sustituir "obj.", Y sustituir los dos casos de esta en el código javascript.

Usted debería ser capaz de guardar una vista previa de su trabajo y ahora para ver lo que has hecho. Esta técnica puede ser usada en conjunto con una secuencia de comandos de posición para obtener el Swf coloca exactamente donde quieras. O configurar diferentes divs donde usted desea que el objetivo específico de películas y el evento para ir allí. Hay otras maneras de conseguir este mismo efecto, pero esto es un poco hackeado forma de llegar con características simples en derecho Dreamweaver CS3.