Esse é um exemplo bem simples de como criar uma interface com o usuário diferente das disponíveis em HTML puro, utilizando os conceitos de HTML, JavaScript e DOM vistos em sala de aula durante o curso.

Para utilizar a barra flutuante, basta criar uma instância da classe HoverBar logo que a página é carregada, passando os argumentos de configuração desejados, como no exemplo abaixo (que é o mesmo código utilizado para criar a barra do lado esquerdo dessa página):

new HoverBar(HoverBar.prototype.LEFT, 32, 64, 10, 0.4, 1, "BARRA", "", "TEXTO BTN",
    "HoverBarCr.png", "http://...", "Minhas Coisas...",
    "/Images/analyzer.png", "http://...", "Graphical Filter Editor",
    "HoverBarFb.png", "http://...", "Facebook",
    "HoverBarGo.png", "http://...", "Google",
    "HoverBarGm.png", "http://...", "Gmail",
    "HoverBarTw.png", "http://...", "Twitter"
);

Os argumentos do construtor têm o seguinte significado:

  1. Posição da barra, que pode ser HoverBar.prototype.[TOP | RIGHT | BOTTOM | LEFT]
  2. Tamanho mínimo dos ícones (em pixels)
  3. Tamanho máximo dos ícones (em pixels)
  4. Espaçamento entre os ícones (em pixels)
  5. Opacidade mínima dos ícones, que vai de 0.0 a 1.0
  6. Opacidade máxima dos ícones, também de 0.0 a 1.0
  7. Nome da(s) classe(s) aplicada(s) ao fundo da barra
  8. Nome da(s) classe(s) aplicada(s) aos ícones
  9. Nome da(s) classe(s) aplicada(s) aos textos flutuantes

Os argumentos finais especificam os ícones desejados. Para cada ícone são necessários três argumentos:

  1. Endereço da imagem do ícone (preferencialmente uma imagem quadrada)
  2. Endereço do destino do link
  3. Texto do ícone

Caso você não pretenda utilizar efeitos de opacidade, basta definir ambas as opacidade mínima e máxima como 1.

O código para fazer a classe HoverBar funcionar pode ser baixado nos links abaixo:
HoverBar.js
HoverBar.css