Awards System With Hover Over

by **SLGray** June 13th 2018, 8:02 am

Profile Awards With Hover Over Names

Dear members,

We are often asked how you can add an item to your profiles and add a name to the items when you hover over them.
I have made an awards system using this.

Great news is We now have a code that is easy to use and understand With thanks to @Walt From the French support forum.

This comes in 3 easy steps.

Step 1
Create a new profile filed.

 ACP >>  Users & Groups Tab >>  Users >> Profiles >>

Settings:
Type : Text Zone.
Name : Profile Rewards (Or what ever your like)
Description : (what ever your like)
Display : Profile  Messages 
Display type : (what ever your like)
Who can modify the profile field value ? Moderators 
Display this field for users that are at least : (what ever your like)
Separator : (what ever your like)
Default content ^* :

Code:: [center][table][tr][td class="scrollable-zone"]No Awards Yet[/td][/tr][/table][/center]

Max length : 15000

Now save.

Step 2

Create a JavaScript
 ACP >>  Modules Tab >>  HTML & JAVASCRIPT >> Javascript codes management >>

Settings:
Title * : Profile Awards.
Placement : Topic's
Code:

Code:: $(function() { var all_items_images = [ 'https://i62.servimg.com/u/f62/12/23/10/57/blue11.png', //Reward 1 'https://i62.servimg.com/u/f62/12/23/10/57/dark_g11.png', // Reward 2 'https://i62.servimg.com/u/f62/12/23/10/57/gree11.png', // Reward 3 'https://i62.servimg.com/u/f62/12/23/10/57/orange12.png', // Reward 4 'https://i62.servimg.com/u/f62/12/23/10/57/perp12.png', // Reward 5 'https://i62.servimg.com/u/f62/12/23/10/57/red10.png', // Reward 6 ]; var all_items_legend = [ 'You hit 100 posts', // Reward 1 'You hit 200 posts', // Reward 2 'You hit 500 posts', // Reward 3 'You hit 5000 posts', // Reward 4 'You get 100 likes', // Reward 5 '10 Or More Items From Credit Store', // Reward 6 ]; $('.postprofile .scrollable-zone img').each(function() { var a = all_items_images.indexOf( $(this).attr('src') ); $(this).attr('title', all_items_legend[a]); }); });

Save.

The only way to give a title to each item is to find it with the URL of the image. That's why we have to list in the variable all_items_images all the images available in this profile zone. I already put in this variable all the items that were in your profile, but if there are others, you will have to add it.

In order to give a title to each item, we have the variable all_items_legend, and each line is the legend of the equivalent image in the all_items_images variable.

For example :

awards - Awards System With Hover Over CBGrrqL

awards - Awards System With Hover Over CBGrrqL

So if you add images, you will add the legends in the same order... I hope I'm clear ahah

Step 3

Adding your Awards to your members profile's:
Go to your members profile you want to add a Award to and add one of the following codes found in the list below.

Adding your Awards :
I have made 6 for you but you can make your own if you wish.

See Awards:

Adding more than one:
Say you want to add the first one and the last one just do the following

Code:: [img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img][img]https://i62.servimg.com/u/f62/12/23/10/57/red10.png[/img]

You will have to add the code where you see this part of the code. No Awards Yet
the code should look something like this

Code:: [center][table][tr][td class="scrollable-zone"][img]https://i62.servimg.com/u/f62/12/23/10/57/blue11.png[/img][img]https://i62.servimg.com/u/f62/12/23/10/57/red10.png[/img][/td][/tr][/table][/center]

 Note: You will have to add this (Manually) to each member (sadly This system does not have a auto fill setting) Then Save.

And this is the result :

awards - Awards System With Hover Over Ezgif_17

This should work in all forums unless you have made a lot of change to your Templates.

I hope you like this little cool setting.
If you have any problems Please feel free to make a thread in the main forum linking me to this thread and tagging me.