Rolagem Horizontal de imagens com MouseOver

[Douglas Riu 0]

Fala galera beleza ? Eu queria fazer um esquema de rolagem horizontal de imagens para um trabalho da facul mas não está rolando

A idéia é que quando eu coloco o mouse em cima da seta para direita ele role para a esquerda certo ? E vice versa.

Quando é vertical eu consigo fazer sem problemas mas não sei como fazer a rolagem horizontalmente, se puderem me dar uma força, pois

quando é vertical uso id_da_div.ScrollTop mas e quando é horizontal ? tentei com Left mas não funcionou.

 

html do 'menu' com as fotos:

 

<div id="menu_mini">
						<div id="seta_esquerda"><img src="imagem/seta_esquerda.gif" onMouseOver="timerTexto = setInterval('divScrollTextCont3.scrollLeft -= 10;',100);" onMouseOut="clearInterval(timerTexto);" /></div>
						<div id="foto_mini">
							<div id="divScrollTextCont3" name="divScrollTextCont3">
								<table cellSpacing="0" border="0" height="60">
									  <tr>
										<td><a href="fotos_ju.html?foto=1"><img src="imagem/ju/mini01.jpg" alt="mini1" class="transparencia" /></a> </td>
										<td><img src="imagem/ju/mini02.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini03.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini04.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini05.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini06.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini07.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini08.jpg" alt="mini1" class="transparencia" /> </td>
										<td><img src="imagem/ju/mini09.jpg" alt="mini1" class="transparencia" /> </td>
									  </tr>
								</table>
						   	</div>
						</div>
			<div id="seta_direita"><img src="imagem/seta_direita.gif" onMouseOver="timerTexto = setInterval('divScrollTextCont3.scrollLeft += 10;',100);" onMouseOut="clearInterval(timerTexto);" /></div>

Aqui vai o CSS da área onde as fotos ficam dentro (divScrollTextCont3).

 

#divScrollTextCont3{
	position:absolute;
	height: 66px;
	width:100%;
	clip:rect(0px 480px 66px 0px);
	overflow:hidden;
}

Valeu, Abraços.

[Carutcho 0]

Cara,

Sinceramente nunca fiz left naum, sempre fiz isso no top rsss

 

Bem eu achei um site aqui em inglês q fala sobre o tal ScrollTop/left

 

http://www.howtocreate.co.uk/tutorials/jav...t/browserwindow

 

Seguinte,

tente fazer assim ó

<script>
var valor = 0;

function esquerda(pos)
{
	if (pos='left')
   {
	   valor-=10;
	   document.getElementById("divScrollTextCont3").style.left = valor+"px";
   }
   else
   {
	   valor+=10;
	   document.getElementById("divScrollTextCont3").style.left = valor+"px";
	}
}
</script>

 

HTML

<div id="seta_esquerda">
		   <img src="imagem/seta_esquerda.gif" onMouseOver="timerTexto = setInterval('esquerda(\'left\')',100);" onMouseOut="clearInterval(timerTexto);" />
  </div>

 

Cara isso é um #@?$%~ de um chute eu to dando, não sei se vai funfar pq realmente naum testei aqui e tals, mas as vezes você consegue resolver com uma "luz" ou alguma coisa q eu tenha escrito sirva pra q você queira ou te dê alguma idéia.

 

 

Absssssssssss e boa sorte.

[nknk 3]

Estas funções assim simplificadas para mover as vzes dá erro e ele fica movendo infinitamente, talvez seja um bug ou uma formulação errada do script, que fiz. Por isso acho melhor utilizar jquery, prototype que tem esses recursos de movimentar na horizontal, acho que eles utilizam uma técnica melhor.

[Carutcho 0]

Na verdade eles fazem algo parecido por baixo dos panos,

Na verdade dá para deixar de ser infinta a rolagem, é só você colocar um tamanho limite para + ou para -

 

Tipo, o bloco ele tem 500px só me interessa mas só me interessa ver 250 pxls, pq essa é o tamanho da div q coloquei meio q como "janela" da coisa. então posso dizer que eu só quero que ele se movimente entre 0px e -250px pra esquerda. Então limito isso mais ou menos assim:

 

Vou usar o codigo la de cima como exemplo, mas não dou garantia de funcionar pq naum testei, é mais por desenrolar de logica mesmo.

 

var valor = 0;
function esquerda(pos)
{
	if (pos='left')
   {
	   if (valor<-250)
	   {
		 clearInterval()
	   }else{
	   valor-=10;
	   document.getElementById("divScrollTextCont3").style.left = valor+"px";
	   }
   }
   else
   {
	   if (valor>0)
	   {
		 clearInterval()
	   }else{
	   valor+=10;
	   document.getElementById("divScrollTextCont3").style.left = valor+"px";
	   }
	}
}

 

Assim ele se ele passar do tamanho que eu estipulei, ele simplesmente não anda mais pra esquerda ou direita.

 

Absss