Troca de imagem com CSS + Javascript
Filed under: Aprender, CSS, JavaScript, XHTML | Tags: CSS, HTML, imagem, JavaScript
Comments(6) Andando pela net, esbarrei numa dúvida de uma usuária do orkut. Eu nunca tinha feito nada com Javascript e só conhecia de nome, mas resolvi tentar.
A intenção era fazer uma rotação com duas imagens, com um tempo determinado, e sem usar flash.
Depois de muito sofrimento e de testes frustrados, a coisa saiu.
Esse é o código:
<html>
<head>
<style type=”text/css”>
#foto1{
background:#f00 url(”foto1.jpg”);
width:100px;
height:100px;
}
#foto2{
background:#00f url(”foto2.jpg”);
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id=”foto1″>
bom dia
</div>
<script>
img = document.getElementById(”foto1″)
function trocar()
{
if (img == foto1)
{
document.getElementById(”foto1″).id = “foto2″;
}
if (img == foto2)
{
window.setTimeout(function(){document.getElementById(”foto2″).id = “foto1″;},10000)
}
}
window.setInterval(”trocar()”,20000)
</script>
</body>
</html>
Na verdade foi minha primeira brincadeira com Javascript (depois do “Ola mundo”, mas isso não conta : P).
Depois eu comento com mais calma, abraços.
