Legenda nas imagens

Qual é minha questão:
Gostaria de saber o Javascript ou código que devo utilizar para implementar uma legenda ao passar o cursor do mouse na imagem que representa os grupos.

Exemplo;

Código:

jQuery(document).ready(function(){g='NOME';jQuery('td.row1 span.gensmall:contains("Legenda") b a:contains("'+g+'"),#main-content p em b a:contains("'+g+'"),#pun-info #onlinelist p:contains("Legenda") b a:contains("'+g+'"),td.row2 div:contains("Legenda") b a:contains("'+g+'")').html('<img src="IMAGEM">')});

Baseado no tutorial [TUTORIAL] Substituir nome do grupo por imagem na legenda.

No tutorial ensina somente a alterar o 'Nome do Grupo' por uma imagem de meu gosto/gênero, porém se está imagem não tiver nada escrito o membro só irá descobrir ao clicar na imagem. Peço a ajuda de vocês para que apareça uma legenda na imagem dos grupos, sem ser necessário clicar na imagem para descobrir o que se refere.

Aguardo respostas.

Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:


Versão do meu fórum:
INVISION

Olá!

Leia este tópico para lhe auxilia-lo:

https://ajuda.forumeiros.com/t58002-

Até logo.

A parte onde se altera as legendas por imagens é fácil conclui com sucesso, porém a questão que estou colocando segue o exemplo a baixo:
Correto? porém vamos ver seu rank, ao passo o link aparece a sequinte legenda

Gostaria de adicionar uma legenda nas legendas que foram substituídas por imagens.
Obrigado pela atenção, aguardo respostas;

Olá!

Poderia me conceder o código criado por você para está função? Ou poderá também fazer com este código:

jQuery(document).ready(function(){g='Moderadores';jQuery('td.row1 span.gensmall:contains("Legenda") b a:contains("'+g+'"),#main-content p em b a:contains("'+g+'"),#pun-info #onlinelist p:contains("Legenda") b a:contains("'+g+'"),td.row2 div:contains("Legenda") b a:contains("'+g+'")').html('<img src="https://2img.net/i/fa/fdf/aidactif.png">')});

Apenas troque o que estas a usar por este, e veja se resulta.

Até mais!

Olá Dr.House,
Segue como exemplo o código:

Código:

jQuery(document).ready(function(){g='Staff';jQuery('td.row1 span.gensmall:contains("Legenda") b a:contains("'+g+'"),#main-content p em b a:contains("'+g+'"),#pun-info #onlinelist p:contains("Legenda") b a:contains("'+g+'"),td.row2 div:contains("Legenda") b a:contains("'+g+'")').html('<img src="http://cdn2.iconfinder.com/data/icons/splashyIcons/marker_squared_yellow_green.png">')});

Aparentemente o código no qual me informou se resulto igual ao outro aplicado no tutorial, como podemos ver a imagem que eu estou usando não tem nada a identificar por isso peço que me ajude a adicionar uma legenda ao passar o curso do mouse.

Obrigado pela atenção.
aguardo respostas!

Olá"

Substitua o código por este:

jQuery(document).ready(function(){g='NOME';jQuery('td.row1 span.gensmall:contains("Legenda") b a:contains("'+g+'"),#main-content p em b a:contains("'+g+'"),#pun-info #onlinelist p:contains("Legenda") b a:contains("'+g+'"),td.row2 div:contains("Legenda") b a:contains("'+g+'")').html('<img src="IMAGEM" title="Titulo">')});

Abraços.

Excelente Batman,
Muito obrigado Batman e Dr.House pela atenção e serviços prestados.
Questão resolvida!