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