Botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos

Imagem: QueBarato

Nível: Iniciante

Updated: 10/04/2009

Um recurso muito útil e muito usado em sites é um menu com os botões voltar, home, avançar, topo da página, atualizar, fechar página, imprimir, favoritos, indique aos amigos. Estes botões facilitam a navegação do usuário, principalmente se a página foi construída dentro de uma janela popup, que não tem os botões padrão do navegador.

O botão Voltar [history.back( )] restaura a última página registrada no histórico, isto é, a última página visitada. É o mesmo que pressionar o botão Voltar [back( )] da barra de ferramentas do navegador. ( Compatível com qualquer navegador )

<a target=“_self“ href=“javascript:window.history.go(-1)“>Voltar</a>
Voltar
<a target="_self" href="window.history.go(-1)">Voltar</a>

<a target=“_self“ href=“javascript:window.history.go(-1)“><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-previous.png”></a>

<input type=”button” value=”voltar” onclick=javascript:window.history.back()>

O botão Home [home( )] abre na janela onde está o link a página definida como página inicial (homepage) do navegador. É o mesmo que pressionar o botão Página inicial [home( )] da barra de ferramentas do navegador.

<a href=”javascript:window.history.home()” target=”_self”>Home</a> Home

<a target=”_self” href=”#” onclick=”this.style.behavior=’url(#default#homepage)’; this.setHomePage(‘http://www.ileitura.com’);”>Home</a> Home
<a target="_self" href="#">Home</a>

<a href=”javascript:window.history.home()” target=”_self”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-home.png”></a>

<input type=”button” value=”Home” onclick=javascript:window.history.home()>

O botão Avançar [history.forward( )] carrega a próxima página registrada no histórico, isto é, a próxima página visitada. É o mesmo que pressionar o botão Avançar [forward( )] da barra de ferramentas do navegador.

<a target=”_self” href=”javascript:window.history.go(1)”>Avançar</a> Avançar
<a target="_self" href="window.history.go(1)">Avançar</a></p> <p>

<a target=”_self” href=”javascript:window.history.go(1)”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-next.png”></a>

<input type=”button” value=”Avançar” onclick=javascript:window.history.forward()>

O botão Topo leva o usuário ao início da página que ele está lendo.

<a target=”_self” href=”#top”>Topo</a> Topo
<a target="_self" href="#top">Topo</a></p> <p>

<a target=”_self” href=”#top”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/go-top.png”></a>

O botão Atualizar [history.go(0)] carrega a mesma página novamente atualizando as informações nela contidas.

<a target=”_self” href=”javascript:window.history.go(0)”>Atualizar</a>
Atualizar
<a target="_self" href="window.history.go(0)">Atualizar</a>

<a target=”_self” href=”javascript:window.history.go(0)”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/view-refresh.png”></a>

<input type=”button” value=”Atualizar” onclick=javascript:window.history.go(0)>

O botão Fechar página [close( )] fecha a janela especificada e pode gerar uma mensagem de confimação de seu fechamento. (Compatível com IE, Netscape 4.45 e 6)

<a target=”_self” href=”javascript:window.close()”>Fechar</a> Fechar
<a target="_self" href="window.close()">Fechar</a>

<a target=”_self” href=”javascript:window.close()”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/emblem-unreadable-1.png”></a>

<input type=”button” value=”Fechar” onclick=javascript:window.history.close()>

O botão Imprimir [print( )] imprime o conteúdo da janela atual.

<a target=”_self” HREF=”JavaScript:window.print()”>Imprimir</a> Imprimir
<a target="_self" href="window.print()">Imprimir</a>

<a target=”_self” HREF=”javaScript:window.print()”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/printer.png”></a>

<input type=”button” value=”Imprimir” onclick=javascript:window.print()>

O botão Favoritos abre uma caixa em que o usuário escolhe um nome de referência e o local em que a página atual será inserida nos favoritos do navegador Internet Explorer.

<a target=”_self” href=”#” onclick=”window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);”>Favoritos</a> Favoritos
<a target="_self" href="#">Favoritos</a>

<a target=”_self” href=”#” onclick=”window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);”><img border=”0″ style=’border: 0px; padding: 1px’ src=”http://i254.photobucket.com/albums/hh120/ileitura/emblem-favorite.png”></a>

<input type=”button” value=”Favoritos” onclick=window.external.AddFavorite(‘http://www.ileitura.com’,'Seu site de leitura e cursos’);>

O botão Indique aos amigos abre o editor de emails com o assunto e a mensagem já definidos anteriormente no próprio código do botão.

<a target=”_self” href=”mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site www.ileitura.com, gostou e está recomendando este site para você. Visite o site ileitura em www.ileitura.com”>
Indique</a> Indique
<a target="_self" href="mailto:?Subject=Indicar"></p> <p>Indique</a>

<a target=”_self” href=”mailto:?Subject=Um amigo(a) seu está indicando este site para você.&Body=Um amigo(a) seu visitou o site www.ileitura.com, gostou e está recomendando este site para você. Visite o site ileitura em www.ileitura.com”>
<img border=”0″ style=’border: 0px; padding: 1px’ alt=”Indique este blog para os seus amigos” src=”http://i254.photobucket.com/albums/hh120/ileitura/email_go.png”></a>

Estes botões podem ser aplicados com um javascript muito simples. Para inserí-los, copie os códigos acima e coloque-os entre as tags body <body></body> da sua página:

Veja o resultado:

Voltar Home Avançar Favoritos Indique Atualizar Topo Imprimir Fechar

Você pode colocar uma imagem no lugar do texto, como por exemplo um botão.

Compatível com o navegador Internet Explorer.