no tópico desta semana, o melhore sua página traz um script com a mesma
função da barra de rolagem do seu navegador, mas com uma vantagem: você
pode substituir a tradicional barras por imagens da sua preferência, tornando
seu layout mais agradável e diferenciado.
este é simples de ser aplicado, mas é um pouco difícil de editá-lo.
1º passo:
antes de tudo, clique aqui e salve o arquivo "scroll.js" na pasta onde está a
sua página. este arquivo é essencial para o funcionamento do script.
2º passo:
copie o código abaixo e cole entre as tags <head> e </head> do seu
código.
<style type="text/css">
#divup{position:absolute; left:470;
top:190}
#divdown{position:absolute;
left:470; top:340}
#divcont{position:absolute;
width:300; height:200;
overflow:hidden; top:180; left:170;
clip:rect(0,300,200,0);
visibility:hidden}
#divtext{position:absolute; top:0;
left:0}
</style>
<script language="javascript"
src="scroll.js"></script>
este script é dividido em 3 partes:
divup = é o botão "para cima" da barra de rolagem
divdown = é o botão "para baixo" da barra de rolagem
divcont e divtext = é o espaço em que vai o texto.
a posição do divup é dada pelos valores destacados em vermelho. alterando
estes valores, você mudará também a posição do botão "para cima".
a posição do divdown é dada pelos valores destacados em azul. alterando
estes valores, você mudará também a posição do botão "para baixo".
a largura e a altura da caixa de texto são dados respectivamente pelos
valores destacados em verde. mas quando você alterar o tamanho da caixa
de texto, você deverá também alterar também os valores destacados em
laranja, usando os mesmos valores do destaque em verde. complicado? por
exemplo:
atual:#divcont{position:absolute; width:300; height:200; overflow:hidden; top:180;
left:170; clip:rect(0,300,200,0); visibility:hidden}
alterado:450; height:350; overflow:hidden; top:180; left:170; clip:rect(0,450,350,0);
visibility:hidden}
mudou o verde, mude também o laranja!
voltando às alterações da caixa de texto... para alterar a sua posição, mude
os valores destacados em roxo.
3º passo:
agora, copie o código abaixo e cole entre as tags <body> e </body> do seu
código:
<div id="divup">
<a href="#" onmouseover="scroll(-
7)" onmouseout="noscroll()"><img
src="scrollup.gif" width="22"
height="39" alt=""
border="0"></a>
</div>
<div id="divdown">
<a href="#"
onmouseover="scroll(7)"
onmouseout="noscroll()"><img
src="scrolldown.gif" width="22"
height="39" alt=""
border="0"></a>
</div>
<div id="divcont">
<div id="divtext">
<p align="center"><font
face="tahoma, arial" size="2">
<p><b>
personalize seu scroll<br>
<br>
insira aqui o seu texto e/ou
imagem.<br>
</font>
</div>
</div>
o valor destacado em azul é a velocidade do botão "para cima". este valor
deve ser sempre negativo.
o valor destacado em vermelho a velocidade do botão "para baixo". este
valor deve ser sempre positivo.
o destaque em verde representa todo o conteúdo da caixa de texto, e pode
ser substituído por textos, imagens, etc.
os destaques em laranja são respectivamente, as imagens do botão "para
cima" e "para baixo". elas podem ser substituídas por alguma de sua
preferência.
4º passo e último passo
agora, salve as imagens a seguir onde está a sua página.
este script é compatível com internet explorer, netscape 4 e netscape 6.
TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger
0 comentários:
Postar um comentário