How would you go about making something similar to this...

[NPipeline]

http://www.friendcodes.com/forums/members/1/corey.html

I'm focused on the "Friend Codes" section of the profile. How would I go about editing templates to make something similar to this. I know the javascript that is required, I'm just not sure how I would go about editing/creating vBulletin templates to suit something like this. I'm also aware that that the images are displayed based on the field ID, but how would you use the vB phrases to create something like that? I can edit templates without much trouble, but I've never tried more advanced things like this.

Also, how would I go about being able to edit these profile fields if I choose not to display them on the profile page, by default.

Thanks for any help that can be provided on this.