Ir para conteúdo
Fórum Script Brasil
  • 0

Barra De Rolagem

-Fowl-

Perguntado por -Fowl-,

 Share

Pergunta

-Fowl-

-Fowl-

Postado
Postado

Boa noite, gostaria de saber como posso fazer para aplicar um barra de roagem em uma figura para por um texto so falta isso pro meu xite sair e ta dificil.

Obs: Eu fiz o layout no fireworks se isso implicar com alguma coisa.

desde-já obrigadão

Fowl :blink:

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
lemissel

lemissel

Postado
Postado

cara tens duas opcoes.. uma: fazer em flash e outra usar este cod aqui...

ae cara tu tem duas opcoes... uma é fazer em flash e outra é usar esse cod aqui.. naumsei c é bem isso q tu queres, mas... 

[CODE]Crie sua Barra de rolagem

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. [URL=http://www.hpg.ig.com.br/melhore/dicas/exemplos/scroll.html]Exemplo[/URL]



Este é simples de ser aplicado, mas é um pouco difícil de editá-lo.

1º Passo:
Antes de tudo, [URL=http://www.hpg.ig.com.br/melhore/dicas/exemplos/scroll.js]Clique aqui[/URL] 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: #divCont{position:absolute; width: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.

cara to tri atrasado aqui... não deu pra colocar as cores pra ti..

faz o seguinte... v ae c tu consegue fazer.. ou entaum me manda um mail q eu t mando a htm com as cores e todos os arquivos certinho.. certo???

abração, Leo.

Link para o comentário
Compartilhar em outros sites
  • 0
lemissel

lemissel

Postado
Postado

é cara mais ou menos assim... ,mas oh.. é q eu n entendi direitoo q você quis dizer..

hiuaiuahuha

tp

logo depois q eu postei tddd esse baita cod pra ti...

eu fui escovar os dentes e me liguei...

tu pode faze com iframe não é?!!!

sacas d iframe???

dá certinho tb...

alias... tu viu o exemplo ali... dae tu vai entende..

e tp eu não sei não c rola uma imagem ali dentro

ahaihuha

eu nunca usei esse cod...

haiuahiua

falou cara..

qualquer cosia posta ae dnovo...

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...