Rollovers Em Adobe Dreamweaver CS3

Este tutorial foi concebido para oferecer ao usuário maior controle e flexibilidade usando a Dreamweaver CS3 interface para criar imagem mouseovers. Ele também vai ensinar como atribuir a imagem mouseover alvo de algum outro lugar na página da web e, em seguida, atribuir um mouseover css estilo ao original mouseover botão.

Parte 2 Mostra como fazer o pop up Swf inserir vídeos em sua página web com alguns pequenos ajustes da construído em funções no Dreamweaver CS3.

Abraham Chaffin Creativecow.net, Cambria, California E.U.A. © 2007 Creativecow.net. Todos os direitos reservados.

Parte 2

Filme 1 Filme 2 Filme 3

O objetivo deste tutorial é exibir um vídeo quando você rolar um elemento. Nós estamos indo para começar por criar a CSS classes que iremos atribuir ao longo deste tutorial placeholder div.

1) na janela css clique o "novo css regra" ícone. Selector tipo será "classe", Chamar o nome da classe "movinvis" e deveria ser criada para este documento apenas.

2) na regra css definição janela selecione o "posicionamento" categoria e definir o tipo de posição absoluta, Visibilidade às escondidas, E os z-index de 999. (posicionamento absoluto torna a classe não empurre outros elementos à sua volta, E uma maior z-index vai colocar a turma em cima de outros elementos.) Pressione OK.

3) novamente criar uma nova regra css da mesma forma que nas etapas 1 e 2 só pode definir o nome da classe "movvis" e defina a visibilidade para visíveis.

4) inserir uma nova div, vá ao menu Inserir layout objetos div tag. Não definir as propriedades para a div ainda e pressione OK.

5) selecione o recém-criado div e na janela Propriedades para definir o div id "movtarget" e para a classe "movinvis".

Agora que o espaço reservado div está configurado para receber nossos filmes vamos criar os botões que serão utilizados para a rollovers. Este tempo de simplicidade, vamos apenas usar texto.

6) coloque o cursor acima do invisível div e digite "filme 1" selecione o texto, E torná-lo um hiperlink. Colocar "#" como o nome do arquivo ou URL. (você pode repetir este passo para configurar o rollovers para "filme 2" e "filme 3"

Próxima vamos inserir os filmes que queremos atribuir ao div usando o capotamento Links. Então iremos atribuir-lhes o div onmouseover dos nossos links. Finalmente vamos atribuir as classes onmouseover e onmouseout assim o div só é visível quando um filme está sendo exibido.

7) vá ao menu Inserir Media Flash e escolher rollover1.Swf. Pressione OK.

8) seleccionar o inseridas Flash vídeo e vá para o menu Exibir Código. Selecione o código entre as noscript e / noscript e copiá-lo para sua área de transferência para ser colado mais tarde.

9) voltar para a concepção vista, indo para visualizar design. Selecione o Flash vídeo e excluí-la.

10) selecione o "filme 1" e em relação a comportamentos janela pressione a (+) botão adicionar comportamento. Escolher definir texto set texto do recipiente. Selecione o recipiente div "movtarget" copiar e colar o código no novo html campo.

11) ter certeza de que o comportamento foi definido para o evento onmouseover para criar o efeito. Se não pode alterá-lo clicando sobre o evento e escolhendo onmouseover a partir do menu suspenso.

12) com o "filme 1" link ainda seleccionado (+) adicionar outro comportamento chamado "mudança de imóveis". Certifique-se que o tipo de elemento é "div", E id é elemento div "movtarget". Selecione a opção "entrar:"De rádio para a propriedade e digite" classname ". Entra "movvis" para o novo valor e pressione OK. Certifique-se este comportamento é atribuído ao evento onmouseover, Se não mudar isso.

13) repita o passo 12 só atribuir o novo valor como "movinvis" e atribuir a ação para o evento onmouseout.

14) repita as etapas 7-13 para "filme 2" e "filme 3".

Agora vamos realizar um truque sobre o javascript dw que utiliza para alterar a propriedade comportamento para que ele funcione da forma que estamos a utilizá-lo para alterar classes.

15) vá para o menu Editar Localizar e substituir. Encontrar no "actual documento", Pesquisa "código fonte", Encontrar "obj.Estilo.", Substituir "obj.", E substituir as duas instâncias do presente no código javascript.

Você deve ser capaz de guardar e visualizar o seu trabalho agora para ver o que você fez. Esta técnica pode ser usada em conjunto com um script para obter o posicionamento Swf posicionado exatamente onde você quer que ele. Ou configuração diferente divs onde deseja que o alvo específico filmes e do evento para ir até lá. Existem outras maneiras de obter esse mesmo efeito, mas isso é um pouco cortado caminho para buscá-la com características simples construído em direito Dreamweaver CS3.