topo
topo
topo
Terça, 22 de Agosto de 2017.
portaldigidesign
menu principal
No Site Na Web
slogan
 
:: Home
:: Fórum
:: Newsletter
:: Na Mídia
:: Recomende-nos
:: Nossos banners
:: Rss Feeds
:: Contato
 
menu design
:: Flash
:: Dreamweaver
:: Fireworks
:: Swishmax
:: Photoshop
:: Corel Draw
:: Ícones
:: Tabela de cores
:: Layouts prontos
 
menu programação
 
:: PHP
:: Asp/.Net
:: Javascript
:: CGI
:: Cold Fusion
 
menu serviços
 
:: Geradores online
:: Indique o site
:: Usuários online
:: Contador
 
menu sites destaque
 
:: Indique seu site
:: Sites destaque
 
menu artigos
 
:: Web Marketing
:: Web acessibilidade
 
 
 

· Artigos » Dreamweaver

 

Links Para Janela Popup  English Version

Por: Ivan W. Primo
Publicado em: 07.12.2005
Visualizações: 68324


rec6 Linkto delicious google yahoo live Twiter

Neste tutorial vamos criar um link que abre uma janela pop up do navegador com os atributos personalizados.

É possível especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela será redimensionável, possuirá uma barra de menus, etc.). Por exemplo: é possível utilizar este comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma imagem em miniatura; com este comportamento, é possível adequar o tamanho da nova janela ao da imagem.

Bom, então vamos lá! Mãos à obra!

Inicialmente vamos criar o link que abrirá a nossa nova janela quando o usuário clicar sobre ele. No painel "Inserir" ou "Insert" clique sobre o botão "Hiperlink".

Insira o texto do link e no campo URL coloque o símbolo "#". Veja:

"


Com o link selecionado, vá até o painel "Design" e clique na guia "Comportamentos" ou "Behaviors (versão em inglês)".

Clique agora sobre o botão que tem um sinal de "+".

No menu que surgir, clique em "Abrir a Janela do Navegador" ou "Open Child Window".

Na caixa de diálogo que se abrir defina as configurações da janela popup que se abrirá quando o link for clicado (Veja a explicação de cada configuração no final desta página):

"

Se você não especificar qualquer atributo da janela, ela será aberta no tamanho e com os atributos da janela que a tiver iniciado, ou seja, a janela onde está o link. A especificação de qualquer atributo da janela automaticamente desativará todos os outros atributos que não estiverem selecionados. Por exemplo: se você não definir qualquer atributo para a janela, ela poderá ser aberta com 640 por 480 pixels e possuir uma barra de navegação, barra de ferramentas de localização, barra de status e barra de menus. Se você definir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e não definir outros atributos, a janela será aberta com 640 por 480 pixels e não possuirá barras de navegação, de ferramentas de localização, de status ou de menus, qualquer alça de redimensionamento ou barras de rolagem.

Definidas as configurações da janela, clique "OK".

Agora, ainda com o link selecionado, observe no painel "Design" que o evento para o link tem o atributo "OnMouseOver". Isso significa que a janela será aberta imediatamente quando o usuário passar o mouse sobre ele.

Para que a janela se abra apenas quando o link for clicado, proceda da seguinte maneira:

Primeiro clique sobre a seta que está ao lado do evento "onMouseOver" no painel "Comportamentos". No menu que surgir, selecione "Mostrar eventos de" ou "Show Events for (inglês)" e clique em "4.0 ou ou mais avançada" como mostra a imagem:


"


Existem outras opções no menu, mas a compatibilidade do seu site com os diversos navegadores, inclusive versões antigas, poderá ser comprometida.

Repita a operação, clicando na seta ao lado do evento, e agora você terá mais opções de eventos. Clique então em "onClick". Agora seu link só abrirá a nova janela quando alguém clicar sobre ele.

"

É isso. você tem agora prontinho o seu link para uma janela popup.

Observe a seguir o significado de algumas das configurações que você pode aplicar à nova janela:

Largura da janela especifica a largura da janela, em pixels.

Altura da janela especifica a altura da janela, em pixels.

Barra de ferramentas de navegação é a linha de botões do navegador que inclui Voltar, Avançar, Página inicial e Atualizar.

Barra de ferramentas de localização é a linha de opções do navegador que incluem o campo de localização.

Barra de status é a área situada na parte inferior da janela do navegador, na qual são exibidas as mensagens (como o tempo restante de transferência e as URLs associadas aos links).

Barra de menus é a área da janela do navegador, onde aparecem os menus Arquivo, Editar, Exibir, Ir e Ajuda. Defina explicitamente esta opção, se desejar que os visitantes possam navegar a partir da nova janela. Se você não definir esta opção, o usuário poderá apenas fechar ou minimizar a janela a partir da nova janela.

Barras de rolagem, se necessárias especifica que as barras de rolagem aparecerão se o conteúdo ultrapassar a área visível. Se você não definir esta opção explicitamente, as barras de rolagem não aparecerão. Se a opção Alças de redimensionamento também estiver desativada, o visitante não poderá exibir o conteúdo que ultrapassar o tamanho original da janela (apesar de poder rolar a janela ao arrastar a margem da mesma).

Alças de redimensionamento especifica que o usuário poderá redimensionar a janela, arrastando o canto inferior direito da mesma ou clicando no botão de maximização, situada no canto superior direito. Se esta opção não estiver definida explicitamente, os controles de redimensionamento não estarão disponíveis e o canto inferior direito da janela não poderá ser arrastado.

Nome da janela é o nome da nova janela. Dar um nome à nova janela se desejar atribuir links a ela ou controlá-la com o JavaScript. Este nome não pode conter espaços ou caracteres especiais


Abraços e até a próxima!

Dúvidas consulte nosso fórum.


Ivan Willian Primo
webmaster@portaldigidesign.com.br



Versão para impressão  Twitter



 

  Comentários:

· Marcos  Postado em: 26.09.2006


· shamam  Postado em: 25.02.2006


Nome: Digite seu nome.Digite seu nome.
Email: Campo Obrigatório. Formato Inválido.
Comentário:   Campo Obrigatório.Digite ao menos 8 caracteres.Até 100 caracteres.
   

   rss

 
hospedagem Host Brasil
Dreamweaver
Fireworks
Flash
SwishMax
Corel Draw
Photoshop
Photoshop
PHP
Asp/.Net
Web Marketing
publicidade
   

 

rodape rss Siga-me no Twitter