[TUTORIAL] Sistema de medalhas com descrição ao passar o mouse

Criar campo no perfil

Resultado

(carregue na imagem para aumentar)

Conteúdo padrão

Código:

[center][table][tr][td class="scrollable-zone"]Sem medalhas[/td][/tr][/table][/center]

Código JavaScript

Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento.

Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador.Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:

        $(function() {
          var lista_de_medallas = [
            'https://i62.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1
            'https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png',  // Medalla 2
            'https://i62.servimg.com/u/f62/12/23/10/57/gree11.png', // Medalla 3
            'https://i62.servimg.com/u/f62/12/23/10/57/orange12.png', // Medalla 4
            'https://i62.servimg.com/u/f62/12/23/10/57/perp12.png', // Medalla 5
            'https://i62.servimg.com/u/f62/12/23/10/57/red10.png', // Medalla 6
         
          ];
       
          var titulo_medallas = [
         
            'Alcanzaste los 100 Posts',                  // Medalla 1
            'Alcanzaste los 200 Posts',                  // Medalla 2
            'Alcanzaste los 500 Posts',                  // Medalla 3
            'Alcanzaste los 5000 Posts',                // Medalla 4
            'Obtuviste 100 Me Gusta',                  // Medalla 5
            'Compraste 10 o Más Objetos en la Tienda', // Medalla 6
         
          ];
       
          $('.postprofile .scrollable-zone img').each(function() {
            var a = lista_de_medallas.indexOf( $(this).attr('src') );
            $(this).attr('title', titulo_medallas[a]);
          });
        });


Adicionar medalhas aos membros

Código:

[img]Link duma medalha[/img]

Pronto, agora basta finalizar ()

Resultado

(carregue na imagem para aumentar)