Scroll Layer

[Carneirinho]

Oi Povão do Dreamweaver,

Comecei um curso de Dreamweaver e tenho mais 1 semana aí pra concluir, então coisas que eu achei que fosse feito pelo dream, eu perguntei pra ele como fazía, uma das minhas duvidas, era como fazer um Scroll em "html" quer dizer, dhtml, ou JS, sei lá, um carinha me falou que era feito pelo dreamweaver e tive vontade de fazer o curso só pra aprender isso, só que o professor da escola me disse que não é no DW, então alguém sabe como fazer esse tipo de Scroll?Tem um horizontal e outro vertical nesses links

http://www.caloi.com.br/produtos/popup/bik...asyrider21v.htm

http://www.directstore.com.br/index.htm

Se alguém souber fazer no DW ou em outro programa, por favor me avise.

abraço,

Carneirinho

[Micheletti]

Olá,

Como já foi dito pelos seu amigo, o DW faz tudo, ou quase tudo. (ainda não concegui fazer uma torta de frango com ele. rs*)

bem vamos começar pelo segundo link.

pega esse codigo ai, e joga ele onde você quiser na sua pagina, ta rodando direitinho, so precisa arrumar os diretoris das imagens.

//Aqui vão as imagens das setas

var gorightimage='../imagens/seta_para_direita.gif'

var goleftimage='../imagens/seta_para_esquerda.gif'

//Configure o tamanho do seu menu

var menuwidth=290

//Velocidade do scroll do menu (1-10), quanto maior o número, maior a velocidade

var scrollspeed=7

//Links do menu

var menucontents='<nobr> <a href="cifras01.htm" target="ampliada"><img src="../imagens/disco01.gif"></a>&nbsp;&nbsp;<a href="cifras02.htm" target="ampliada"><img src="../imagens/disco02.gif"></a>&nbsp;&nbsp;<a href="cifras03.htm" target="ampliada"><img src="../imagens/disco03.gif"></a>&nbsp;&nbsp;<a href="cifras04.htm" target="ampliada"><img src="../imagens/disco04.gif"></a>&nbsp;&nbsp;<a href="cifras05.htm" target="ampliada"><img src="../imagens/disco05.gif"></a>&nbsp;&nbsp;<a href="cifras06.htm" target="ampliada"><img src="../imagens/disco06.gif"></a>&nbsp;&nbsp;<a href="cifras07.htm" target="ampliada"><img src="../imagens/disco07.gif"></a>&nbsp;&nbsp;<a href="cifras08.htm" target="ampliada"><img src="../imagens/disco08.gif"></a>&nbsp;&nbsp;<a href="cifras09.htm" target="ampliada"><img src="../imagens/disco09.gif"></a>&nbsp;&nbsp;<a href="cifras10.htm" target="ampliada"><img src="../imagens/disco10.gif"></a>&nbsp;</nobr>'

var actualwidth=''

var ns_scroll

function fillup(){

if (document.all){

test2.innerHTML=menucontents

actualwidth=test2.offsetWidth

}

else if (document.layers){

ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2

ns_scroll.document.write(menucontents)

ns_scroll.document.close()

actualwidth=ns_scroll.document.width

}

}

window.onload=fillup

function moveleft(){

if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))

test2.style.pixelLeft-=scrollspeed

else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))

ns_scroll.left-=scrollspeed

lefttime=setTimeout("moveleft()",50)

}

function moveright(){

if (document.all&&test2.style.pixelLeft<0)

test2.style.pixelLeft+=scrollspeed

else if (document.layers&&ns_scroll.left<0)

ns_scroll.left+=scrollspeed

righttime=setTimeout("moveright()",50)

}

if (document.all||document.layers){

with (document){

write('<table border="0" cellspacing="0" cellpadding="0">')

write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>')

write('<td valign="top">')

if (document.all){

write('<span style="position:relative;width:'+menuwidth+';">')

write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')

write('<span id="test2" style="position:absolute;left:0;top:0">')

write('</span></span></span>')

}

else if (document.layers){

write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')

write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')

}

write('</td>')

write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')

write('<img src="'+gorightimage+'"border=0></a>')

write('</td></table>')

}

}

----------------------

P ter uma barra Horisontal ou vertical, use um Iframe, se o Documento que você vai exibir no Iframe for maior que o Iframe, ele automaticamente gera barras de rolagem.

ps: faça uma busca sobre Iframes nesse forum, você vai encontrar sobre Iframes e sobre Imagens no Scroll.

[Carneirinho]

Oi Micheletti, obrigado pela atenção.

Eu colei esse código no DW e não aconteceu nada, eu andei pesquisando e me falaram que tem como instalar um código com a extensão mxp se não me engano, e instalar ele pelo Macromedia Extension Manage, daí o código fica pronto e facil de usar no DW, eu quería aprender a trabalhar com isso.

Se quiser eu posso colocar no meu servidor esse mini aplicativo, ou sei lá como é o nome, pra você ver se consegue fazer pelo dreamweaver, será que é possível dessa maneira?

abraço,

Carneirinho

[Micheletti]

clique aqui=> p/ ver rodando

Ficiona sim cara, acho que você colocou o script errado, segue o codigo html inteiro, agora é só você arrumar os diretorios. qualquer coisa posta ai.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem t&iacute;tulo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<script language=JavaScript1.2>

//Aqui vão as imagens das setas

var gorightimage='../imagens/right.gif'

var goleftimage='../imagens/left.gif'

//Configure o tamanho do seu menu

var menuwidth=290

//Velocidade do scroll do menu (1-10), quanto maior o número, maior a velocidade

var scrollspeed=7

//Links do menu

var menucontents='<nobr> <a href="cifras01.htm" target="ampliada"><img src="../imagens/disco01.gif"></a>&nbsp;&nbsp;<a href="cifras02.htm" target="ampliada"><img src="../imagens/disco02.gif"></a>&nbsp;&nbsp;<a href="cifras03.htm" target="ampliada"><img src="../imagens/disco03.gif"></a>&nbsp;&nbsp;<a href="cifras04.htm" target="ampliada"><img src="../imagens/disco04.gif"></a>&nbsp;&nbsp;<a href="cifras05.htm" target="ampliada"><img src="../imagens/disco05.gif"></a>&nbsp;&nbsp;<a href="cifras06.htm" target="ampliada"><img src="../imagens/disco06.gif"></a>&nbsp;&nbsp;<a href="cifras07.htm" target="ampliada"><img src="../imagens/disco07.gif"></a>&nbsp;&nbsp;<a href="cifras08.htm" target="ampliada"><img src="../imagens/disco08.gif"></a>&nbsp;&nbsp;<a href="cifras09.htm" target="ampliada"><img src="../imagens/disco09.gif"></a>&nbsp;&nbsp;<a href="cifras10.htm" target="ampliada"><img src="../imagens/disco10.gif"></a>&nbsp;</nobr>'

var actualwidth=''

var ns_scroll

function fillup(){

if (document.all){

test2.innerHTML=menucontents

actualwidth=test2.offsetWidth

}

else if (document.layers){

ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2

ns_scroll.document.write(menucontents)

ns_scroll.document.close()

actualwidth=ns_scroll.document.width

}

}

window.onload=fillup

function moveleft(){

if (document.all&&test2.style.pixelLeft>(menuwidth-actualwidth))

test2.style.pixelLeft-=scrollspeed

else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))

ns_scroll.left-=scrollspeed

lefttime=setTimeout("moveleft()",50)

}

function moveright(){

if (document.all&&test2.style.pixelLeft<0)

test2.style.pixelLeft+=scrollspeed

else if (document.layers&&ns_scroll.left<0)

ns_scroll.left+=scrollspeed

righttime=setTimeout("moveright()",50)

}

if (document.all||document.layers){

with (document){

write('<table border="0" cellspacing="0" cellpadding="0">')

write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>')

write('<td valign="top">')

if (document.all){

write('<span style="position:relative;width:'+menuwidth+';">')

write('<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">')

write('<span id="test2" style="position:absolute;left:0;top:0">')

write('</span></span></span>')

}

else if (document.layers){

write('<ilayer width='+menuwidth+' name="ns_scrollmenu">')

write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')

}

write('</td>')

write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')

write('<img src="'+gorightimage+'"border=0></a>')

write('</td></table>')

}

}

</SCRIPT>

</body>

</html>

[Deividy]

bom vamos por partes

o código do Micheletti é um javascript não sei se você percebeu Carneirinho então nesse código ai faltatam as tag

<script>

aqui você coloca o código do Micheletti

</script>

feito isso vai funcionar eu testei.

Respondendo sua pergunda sim existe um extenção que faz isso que facilitaria sua vida pracaramba e não teria que fazer todo esse código. Só que eu não tenho essa extenção aqui no trabalho assim que eu encontar eu lhe mando.

E tambem existe outra maneirade de fazer isso que é usando a Timiline e camadas, mais estou sem tempo para fazer um exemplo.

Bom acho que é só. Se você não consegui volte a postar aqui beleza.

Se funcionar você só tera que trocar as figuaras acredito eu ai se tiver dúvidas pergunte que o pessoal do forum responsde.

abraço.

[Guest damcg]

Carneirinho,

vai lá no http://www.dynamicdrive.com que na seção do DHTML tem todos esses menus que você quer, com visualização, e muitos mais. Só copiar e ajustar os links no teu site.

[Micheletti]

Aê carnerinho,

Achoq eu agora foi não é?

qualquer coisa posta ai. falow? ;)

[Carneirinho]

Opa, valeu Micheletti e todo mundo, deu sim, eu na loucura de estar fazendo dois cursos ao mesmo tempo, acabei nem percebendo o script, daí coloquei entre as tags de script e funcionou.

Voltando ao caso do DW, eu fiz o seguinte, me deram um arquivo pra instalar no Macromedia Extension Manage, e eu instalei, daí abrí o DW, fui na janela Comands e tava lá instalado a extensão, daí dei um cliquei e fiz o scroll do jeito que eu queria, achei legal essa parte do DW que pra mim é novidade, minha area mesmo é Flash, mas agora que estou aprendendo DW, estou gostando muito, mas valeu todo mundo pela força aí, precisando de algo é só pedir tb.

abraço,

Carneirinho

[Guest Dahoo]

Carneirinho, tem como você me passar este arquivo?

Vai server muito bem pra mim também, e vai me poupar tempo. :)

spawnk@gmx.net

Manda pro mail, se puder.

Obrigado.