Exemplo On-line:
http://www.afixar.co...oads/afx_fotos/
<body topmargin="0" leftmargin="0">
<script language="JavaScript">
// Define as fotos na Array fotos
var fotos = new Array('images/001.jpg','images/002.jpg','images/003.jpg');
// Conta o Total de fotos
var total = fotos.length;
// Define uma posição inicial
var posicao = 1;
// Define a imagem inicial
var ft_src = fotos[0];
function show(act){
//Soma -1 do total da posição
if(act=='back'){ var ft_n = --posicao; }
//Soma +1 do total da posição
if(act=='next'){ var ft_n = posicao++; }
// Esconte a opção de voltar caso seja meno ou igual a 0
if(posicao <= 0) { document.getElementById('back').style.display='none'; } else { document.getElementById('back').style.display='block'; }
// Esconte a opção de avançar caso seja igual a 0
if(posicao == total) { document.getElementById('next').style.display='none'; } else { document.getElementById('next').style.display='block'; }
// Define a foto que irá aparecer
var ft_src = fotos[ft_n];
document.getElementById('foto').src=ft_src;
// Escreve a posição para visualizar
window.document.getElementById('paginacao').innerHTML = posicao+' / '+total;
}
// Define as imagens dos botões
function img(id,img){
document.getElementById(id).src=img;
}
// Esconde as imagens dos botões
function hidden(){
document.getElementById('back').src='images/transparente.gif';
document.getElementById('next').src='images/transparente.gif';
}
</script>
<style>
.paginacao
{
z-index: 2;
position: absolute;
padding-left: 2px;
padding-right: 2px;
left: 380;
top: 0;
background-color: black;
font-family: Tahoma, Arial, Verdana;
font-size: 8pt;
color: #FFFFFF;
}
.back
{
z-index: 1;
display: none;
position: absolute;
top: 0px;
left: -1px;
}
.next {
z-index: 1;
display: block;
position: absolute;
top: 0;
left: 485;
}
</style>
<div id="paginacao" class="paginacao"></div>
<img id="foto" onmouseover="hidden();" border="0" src="images/transparente.gif" width="793" height="396">
<a href="java script:show('back');"><img id="back" onmouseover="img('back','images/ft_back.gif');" border="0" src="images/ft_back.gif" width="308" height="395" class="back"></a>
<a href="java script:show('next');"><img id="next" onmouseover="img('next','images/ft_next.gif');" border="0" src="images/ft_next.gif" width="308" height="395" class="next"></a>
<script language="JavaScript">
// Define a foto
document.getElementById('foto').src=ft_src;
// Define a posição
window.document.getElementById('paginacao').innerHTML = posicao+' / '+total;
</script>Versão para download
http://www.afixar.co.../afx_fotos.zip
