Embora o HTML dinâmico pareça dinâmico, na verdade, toda a Web ainda é quase estática. É claro que alguns dos sites mais vanguardistas já possuem algum conteúdo interativo há algum tempo, mas a maioria deles ainda é implementada usando plug-ins ou escrevendo múltiplas páginas para diferentes versões de navegadores. Para a maioria dos produtores de páginas da web, mesmo que queiram escrever várias versões de uma página, é difícil ter tempo. Além disso, as páginas da web que podem obter efeitos interativos geralmente exigem alta largura de banda. autor e o espectador. Porém, não precisa ser assim. Aqui, você pode aprender uma maneira rápida e fácil de adicionar efeitos DHTML a páginas da web em condições de baixa largura de banda. Este método não requer o carregamento de nenhuma imagem ou a gravação de várias páginas.
Melhor captura de informações do mouse
O mouseover é um dos métodos dinâmicos mais utilizados e eficazes na Web, e um bom motivo é que ele permite ao visualizador obter feedback claro e direto. Pense assim: mova o mouse sobre um link de hipertexto e o link ficará destacado, mudará de cor ou mudará para dizer "Eu sou um link!"
Isso não significa que todos os links de passagem do mouse criados sejam iguais. Eles são diferentes. A pior situação é que os links de mouseover são implementados em linguagem Java ou em formatos especiais, como o formato Shockwave da Macromedia, que exige que o visualizador instale um plug-in para ver o efeito. O melhor cenário é que os links de passagem do mouse sejam escritos em JavaScript compatível com todos os navegadores. Mas mesmo que seja implementado com JavaScript, ainda exige que o navegador carregue duas imagens, uma para alto brilho e outra para exibição normal, o que é um desperdício de utilização de largura de banda.
Agora vamos dar uma olhada no DHTML, que cria links de passagem do mouse sem carregar nenhuma imagem. A única coisa a notar é que o código DHTML precisa ser aberto pelo navegador para abrir objetos de páginas da Web, como links e estilos, para que possam ser descritos pelo Document Object Model (DOM). Em outras palavras, o código atualmente só funciona no Internet Explorer 4.0. No entanto, o navegador de quinta geração da Netscape (com lançamento previsto para o final deste ano) suportará totalmente o DOM. Além disso, não se preocupe com o uso de links de mouse em navegadores incompatíveis que não suportam o código DHTML na página, simplesmente os ignorarão. (Para obter detalhes, consulte a seção "Deixe o DOM funcionar em seu site" posteriormente.)
Código
As páginas comuns da Web são divididas em duas áreas principais: uma é a área de conteúdo e a outra é a área de navegação. Links de passagem do mouse geralmente aparecem na área de navegação. Normalmente, os botões destacados são usados para direcionar os visualizadores para diferentes áreas do site, como gráficos do site ou páginas de feedback. Em vez de usar botões, transformaremos links de texto comuns em links interativos ao passar o mouse. O método é: primeiro insira links de texto comuns no documento, como:
< a href="contact_us.html">
Fale Conosco</a>.
A segunda etapa altera a cor do link de texto quando o mouse passa sobre ele. O programa de script DHTML é o seguinte:
function rollon( ){
if (window.event.
srcElement.tagName == "A"){
window.event.srcElement.color
= "red";}
}
function rolloff(){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = rollon;
document.onmouseout
= rolloff;
<No meio da tag script>, insira-a no <head> da página da Web e você poderá obter imediatamente o efeito do mouse em cada link de texto. Abaixo analisamos em detalhes como isso é conseguido.
O programa de script escrito anteriormente define duas funções principais: rollon (ativada quando o mouse se move sobre o link) e rolloff (ativada quando o mouse se afasta do link). Cada função começa com uma simples instrução 'if', o que significa: toda vez que o evento onmouseover é chamado no documento da Web, a função rollon notificará o navegador para determinar se o objeto que ativa o evento é uma tag Anchor (window.event . srcElement.tagName == "A"). Nesse caso, o script aplicará um estilo especial (vermelho neste caso) ao link. Da mesma forma, quando ocorre o evento onmouseout, a função rolloff retornará o estilo à sua cor padrão (color="").
As duas últimas linhas deste script notificam o navegador para executar a função rollon quando ocorrer o evento onmouseover e para desativar a função de link mouseover (mouseover) quando ocorrer o evento onmouseout.
Obtenha o dobro do resultado com metade do esforço
O Internet Explorer 4.0 permite que você use DHTML para controlar todos os objetos do documento. Naturalmente, você pode obter mais funções além de alterar a cor da tag Anchor. Na verdade, você pode aplicar qualquer elemento de Cascading Style Sheets (CSS, uma especificação de formatação padrão do W3C) a qualquer tipo de objeto ou componente de recurso. Por exemplo, além de fazer um link aparecer em vermelho, você também pode adicionar ou remover o sublinhado dele.
Para remover o sublinhado, basta inserir o seguinte atributo de estilo em todas as tags âncora da página:
style = "text-decoration: none"
Esta instrução removerá o sublinhado do link, fazendo com que ele pareça normal ou padrão. (Por padrão, o Internet Explorer 4.0 e o Navigator 4.0 sublinham todos os links de texto. A instrução acima alterará o estado padrão desses links um por um.)
Em seguida, adicione a seguinte instrução abaixo da função rollon:
window.event.style.
textDecoration = "underline";
Agora, o recurso para o evento mouseover que você definiu ficará vermelho e terá um estilo de sublinhado. Deve-se notar que o sublinhado pode ser removido adicionando a seguinte instrução à função rolloff:
window.event.srcElement.style.
textDecoration = "none"
As funções de modificação acima que podem ser implementadas mostram rapidamente o poder de um DHTML simples; programa de script. Não requer o carregamento de nenhuma imagem, mas usa um código altamente flexível e portátil para produzir efeitos visuais atraentes. Posso dizer que você pode usá-lo para acessar qualquer documento, mesmo em navegadores mais antigos. Se você deseja obter este código e dominá-lo sozinho, visite nosso site: www.windowspro.com .
-------------------
Edward Grossman é o produtor do site www.windowspro.com . Ele tem doutorado em filosofia e está envolvido em pesquisas na área de. filosofia antes do surgimento da Web. Seu e-mail: [email protected]
Basta adicionar cerca de 15 linhas de código ao ①cabeçalho do documento e você poderá transformar ②links de texto normais em qualquer página da Web em ③links interativos ativados pelo mouse (mouseover).
------------
Faça o DOM funcionar no seu site
Com o Dynamic HTML (DHTML), a programação orientada a objetos não é mais algo que apenas especialistas em programação podem fazer, está se tornando uma área que até mesmo os experientes da web podem fazer. os criadores de páginas podem se envolver. Isso se deve em grande parte ao Document Object Model, ou DOM. Esta especificação W3C trata cada componente de um documento como um objeto, seja um documento, um estilo ou um link. Os scripts podem modificar esses objetos com base na entrada do usuário, no tipo de navegador ou em muitas outras variáveis, incluindo alteração do tamanho, alteração do estilo ou atualização do link.
O DOM pode abrir um documento inteiro, permitindo que os autores da web criem páginas interativas altamente personalizáveis sem impor grandes sobrecargas de download aos usuários. Isso não apenas permite links de mouseover de baixa largura de banda, mas também permite menus recolhíveis de navegação na web e componentes de página móveis (como imagens, blocos de texto, etc.).
Para obter mais informações sobre o DOM, visite os sites: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ e developer.netscape.com/docs/manuals/communicator/dynhtml/.
Para exemplos de aplicações DHTML, visite: www.windowspro.com e www.projectcool.com (tente arrastar o Saturn) e navegue em "Ver código-fonte".
No IE 4.0, você pode usar HTML dinâmico para operar dezenas de objetos. Uma lista detalhada está disponível em www.microsoft.com .