>> Tecnologia eletrônica >  >> Celulares e Acessórios Celulares >> smart Phones

Mouseover Javascript Efeitos botão

Se você já viu um botão em um site que muda de forma quando o cursor está sobre ele , então você provavelmente já viu um efeito " Mouseover " usando javascript. Javascript , para não ser confundido com a linguagem de programação Java, é uma linguagem de script simples para páginas da Web. A capacidade para javascript para armazenar e recuperar variáveis ​​permite efeitos exclusivos quando um mouse passa sobre um item, incluindo botões.
O " OnMouseOver " atributo

Na maioria das vezes , javascript é contratado pela definição de " OnMouseOver " dentro de uma tag link

& lt; . a href = " mysite.com " onmouseover = "

Este atributo vai realmente envolver o código javascript que você vai escrever para os botões ou pode identificar diretamente o nova imagem . Como a maioria dos botões em páginas da Web são arquivos de imagens , na verdade, pequenas , você pode criar muitos efeitos diferentes , utilizando duas imagens diferentes, uma para o botão regular e outro para o botão " Mouseover " .

Integrado Javascript

Hoje, muitos navegador incluir o código javascript necessário integrar o " OnMouseOver " e " OnMouseOut ", que retorna o botão ao seu estado original após o rato deixou , sem qualquer javascript adicional. para realizar isso, coloque a frase " documento. [ itemname ] .src = [ localização ]" após o " ... over" e " ... fora " atributos. A " [ itemname ]" é substituído por valor do atributo ID na tag de imagem que deseja rolou . Por exemplo, document.mine.src = " mypicture2.jpg " correlaciona-se com uma tag de imagem & lt; img src = id = mypicture.jpg mina > . O " local " é o diretório onde o MouseOver ou arquivo mouseout senta. Se isso é o mesmo diretório que o arquivo HTML onde o código está sendo escrito , em seguida, apenas o nome do arquivo é necessário.
Adicionando Script

Este tipo de código pode ser complicado se você deseja numerosos efeitos de sobreposição . Para agilizar o processo , você pode escrever uma função javascript e simplesmente chamar essa função com um número variável ou string. Coloque o javascript no cabeçalho do arquivo HTML e coloque-o dentro do & lt; SCRIPT> . A "função " nome " ()" - onde 'nome' é qualquer nome exclusivo que você escolher - pode então ser chamado no & lt; OnMouseOver ou OnMouseOut atributos A> tag. Por exemplo, & lt; a href = " webpage.html " onmouseover = " MyOver ()" onmouseout = " MyOut ()> . " Se você usar variáveis ​​, você pode criar um script que procura automaticamente uma imagem e seu MouseOver correspondente equivalente. Por exemplo , o script poderia procurar um arquivo de imagem " [ variável ] _on.jpg " quando OnMouseOver é ativado e " [ variável ] _off.jpg " quando OnMouseOff é ativado. Em seguida, a tag só teria de chamar de " onmouseover = ' myout ( [ variável ] ) " , a fim de ser ativado. As imagens associadas seria, naturalmente , têm de ser nomeado como " [ variável ] _on.jpg " e " [ variável ] _off.jpg " - " [ variável ]" é, naturalmente , qualquer texto original ou seqüência numérica que você escolher .
Capotamento Images of

as rolagens finalmente vir para baixo a como você a criar as imagens para exibir o botão. Alguns efeitos comuns incluem fazendo teh botão original " brilho ", como você passa o mouse sobre ele. Efeitos mais velhos fizeram um botão levantou -olhando aparece como se tivesse sido pressionado . Estes efeitos usar várias imagens , criado em software de edição de imagens . É importante que todos esses arquivos de imagem são as dimensões exatas mesmas , caso contrário, a página da Web pode ficar distorcida em cada rollover .