/*
* Copyright (c) 2012 [iPs]TeaM
* Bruno da Silva (email@brunodasilva.com)
* Simples sistema para simular o efeito deslizar texto sobre imagem
* www.brunodasilva.com
* www.ips-team.forumeiros.com
*/
<div><img onmouseout="fritasDesmover();" onmouseover="fritasMover();" src="http://cybercook2.terra.com.br/img/receita/batatas-fritas-f8-3028.jpg" /></div>
<div id="textoBatatas" style=" position:absolute; background-color:gray; top:343px; display:none; ">Eu gosto de batatas-fritas, é crocante e deliciosa, ótimo aperitivo pra tarde</div>
<script>
// Posição 322 é onde termina de mover, lembre-se !!
// 343 é a posição de onde a div começará a se mover
// Mude os números no script :)
/////////////
var i = 0;
var timer = 0;
var obj = document.getElementById('textoBatatas');
//////////////
function fritasMover() {
if(i == 0) {
obj.style.display = "block";
timer = setInterval("moverFritasCima()", 10);
}
}
function fritasDesmover() {
if(i == (343 - 322)) {
obj.style.display = "block";
timer = setInterval("moverFritasBaixo()", 10);
}
}
////////////
function moverFritasBaixo() {
i --;
if(i == 0) {
obj.style.display = "none";
clearInterval(timer);
}
obj.style.top = 343- i + "px"
}
function moverFritasCima() {
i ++;
if(i == (343 - 322)) clearInterval(timer);
obj.style.top = 343- i + "px"
}
</script>