[TUTORIAL] Link com texto ao passar o mouse

Muitas vezes queremos adicionar um comentário ou uma descrição à um link que criamos. Isso pode ser feito de uma forma prática e aproveitando recursos utilizados em outras partes do fórum, simplificando o código que deve ser utilizado. O conteúdo HTML é exibido ao passar o mouse sobre o link e somente desaparece quando este sai do link.

--> Tutoriais e astúcias <--
Link com texto ao passar o mouse

1º - Código que deve ser utilizado:
O código é bem simples. No próximo ponto iremos explicar onde o mesmo poderá ser colocado, mas de maneira geral é em qualquer local que aceite códigos HTML.

O código para o link que iremos utilizar é:

<a href="ENDEREÇO_DE_REDIRECIONAMENTO" onmouseover="createTitle(this, 'MENSAGEM', event.pageX, event.pageY);" onmouseout="destroyTitle();">TEXTO</a>

Vermelho -> Deverá substituir pelo endereço de ligação do link. Lembre-se que este deve conter um endereço de uma página.
Verde -> Representa a imagem. Mas para este teremos de ter um pouco mais de cuidado pois existem algumas regras para a construção do código, para evitar que hajam problemas: ao invés de usar aspas duplas para definir o valor de uma propriedade, não deverá colocar nada, veja o exemplo:

createTitle(this, '<div class="module">Fórum dos fóruns</div>', event.pageX, event.pageY);

Ao invés disso, deverá remover estas aspas, ficando assim o código:

createTitle(this, '<div class=module>Fórum dos fóruns</div>', event.pageX, event.pageY);

Preto -> O texto que será exibido no link. Ao passar o mouse sobre isso é que será exibida a mensagem.



2º - Locais em que este código pode ser utilizado:
Em geral, em qualquer lugar que aceite códigos HTML. Mas, para facilitar, trouxemos uma lista deles:

1. Mensagem da Home Page:
   Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page"
   
2. Widgets (em todos que são possíveis de criar ou modificar):
   Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
   ou
   Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos widgets do fórum
   
3. Newsletter's (modo HTML)
   Painel de Controle -> Geral -> Newsletter -> Redação e envio
   
4. Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!
   

3º - Imagem do resultado:

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Link com texto ao passar o mouse