1 reply to this topic

[Oaclety]

bom, eu vi esse site:
http://www.earthbound-ro.com/

e um pouco pra baixo tem umas imagens passando, e quando você poem o mouse em cima de uma, o as imagens param de passar,
e em baixo dedas aparece a descriçao.
como faço isso?

[Édipo Costa Rebouças]

bem amigo, nem vi o código mais vi funcionando...

Acho que da para fazer assim.

Você vai ter que usar dois divs e links ou imagens, um dentro do outro:

[codebox]<div id="pai">

<div id="filho">

<img src="exemplo.gif" alt="descrição">
<img src="exemplo.gif" alt="descrição">
<img src="exemplo.gif" alt="descrição">
<span style="clear: both; display: block "> <!-- --> </span>
<img src="exemplo.gif" alt="descrição">
<img src="exemplo.gif" alt="descrição">
<img src="exemplo.gif" alt="descrição">

</div>

</div>[/codebox]


O div pai seria o div que fazendo uma analogia, como um palco de um teatro.
o div filho como um curtina, e as imagens, desenhos nessa curtina.
para os desenhos andarem, vc teria que puxar a cortina, que ficaria inicialmente escondida atras do limete direito do palco e seria puxado até o lado esquerdo do palco.

vamos a CSS

[codebox]
div#pai{
position: relative;
height: 100px; width: 500px; /* valores variaveis conforme a largura do container desejado */
overflow: hidden;
}

div#filho{
position: absolute; top: 0 ; left: 300px;
height: 100 px; width: 300px;
}

div#filho img{ float: left; }
[/codebox]


para o div filho andar a esquerda, temo que ter uma função que vá movendo o mesmo a esquerda, subtraindo valores no left, sendo que o valor da subtração total tem que ser a largura do pai+ largura do filho, quando esse valor atingir o seu limite, volta tudo pro começo.

vamos ter que inserir um metodo no onmouseover que pare a movimentação do div filho e pegue o valor do title e jogue em um lugar adequado.
no onmouseout ativamos denovo a função que faz o div#filho andar.
o javascript vou deixar com o pessoal do forum pois estou com preguiça, mas voi deixar como mais ou menos ficara; vou deixar uma interface para a solução.

[codebox]function SliderImages(elemento){

var isMove = true;
/* o construtor devera colocar a função onImage e outImage no onmouseover e onmouseout das imagens dentro do div filho */

this.move = function(){
while(isMove){
/*código a ser implementando, devera ter um delay de um ou dois segundo e verficar se a distancia percorida já chegou no limite, se sim, voltar ao começo */
}

}

this.onImage = function(object){
/*código a ser implementando, devera trocar o valor de isMove para false pegar o title e jogar no lugar da descrição*/
}

this.outImage = function(object){
/*código a ser implementando, devera mudar o valor de isMove e chamar a função move */
}

}

[/codebox]

Edição feita por: Édipo Costa Rebouças, 19/10/2008, 18:53.